Страницы

Поиск по вопросам

понедельник, 19 ноября 2018 г.

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

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


Комментариев нет:

Отправить комментарий