Можно ли сделать такой DOM элемент, чтобы все клики проходили сквозь него?

Question

[BorodinKO]

... на элемент лежащий под ним, при этом чтобы этом элемент был виден?

Мне в голову приходит идея о том, чтобы отловить события, на верхнем элементе, и имулировать их на нижний, но есть ли варианты проще?

Answer 1

[BorodinKO]

Это нужно для того, чтобы передавать события в iframe поверх которого находится надпись.

Я делал так:

var listener = function(e) {
	iframe.postMessage({type: e.type, x:e.clientX, y:e.clientY}, '*');
}
domElement.addEventListener('mousedown', listener);
domElement.addEventListener('mouseup', listener)
domElement.addEventListener('mousemove', listener);

а внутри iframe

window.addEventListener('message', function(e) {
    var event = document.createEvent ('MouseEvents');
    event.initMouseEvent(e.data.type, true, true, window, 1, null, null, e.data.x, e.data.y, false, false, false, false, 0, null);
    domElement.dispatchEvent(event);
})

Спасибо большое SelenIT2 за pointer-events:none теперь все проесще и нативно

Answer 2

[Dave]

Если попроще, и натуральнее, то можно прикрепить один обработчик к коллекции элементов. Если используешь Jquery, то можно так:

// Укажи селекторы через запятую
$("button, a").click(function(){
   // Do smth
});

Answer 3

[Юрий]

непонятна причина зачем, а так наверное правильнее как вы и сказали

$(document).click(function(e){
  // e.target - по какому элементу кликнули
});

непонятно почему это не подходит для вас?

кстати если сделать так

$(document).on('click', '.myClass', function(e){
  // ...
});
$(document).on('click', '.myOtherClass', function(e){
  // ...
});

то jquery поставит один клик обработчик на document а уже внутри будет проверять кликнули по myClass или myOtherClass и вызовет одну(а может и не одну) из ваших функций.