JavaScript: клик по перекрытому элементу

#javascript #html #css

В данном эксперименте синий квадрат спозиционирован абсолютно, полностью закрывая
собой красный. Допустим, по тем или иным причинам красный квадрат также спозиционировать
абсолютно и добавить ему больший z-index не позволено. Можно ли при таком раскладе
заставить реагировать на клик красный квадрат?



var $redDiv = $('.div1');
var $blueDiv = $('.div2');
var $parent = $('.parent');

$redDiv.on('click', function(){
	console.log('OK');
});
.div1, .div2{
  width: 100px;
  height: 100px;
}

.parent{
  position: relative;
  height: 200px;
}
.div1{
  background: rgba( 255, 0, 0, 0.5);
}
.div2{
  background: rgba( 0, 0, 255, 0.5);
  position: absolute;
  top: 0;
  left: 0;
}



  

  





    

Ответы

Ответ 1

Используйте pointer-events: none; на том элементе, который должен быть «прозрачным»
для кликов.



var $redDiv = $('.redDiv');
var $blueDiv = $('.blueDiv');
var $parent = $('.parent');

$redDiv.on('click', function(){
	alert('Click on Red catched');
});
.redDiv, .blueDiv{
  width: 100px;
  height: 100px;
}

.parent{
  position: relative;
  height: 200px;
}
.redDiv{
  background: red;

}
.blueDiv{
  background: blue;
  position: absolute;
  pointer-events: none;
  top: 10px;
  left: 10px;
}