В данном эксперименте синий квадрат спозиционирован абсолютно, полностью закрывая собой красный. Допустим, по тем или иным причинам красный квадрат также спозиционировать абсолютно и добавить ему больший 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;
}
Ответ
Используйте 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;
}
Комментариев нет:
Отправить комментарий