HTML / CSS: сделать div "невидимым" для кликов?

Question

По разным причинам мне нужно поместить (в основном) прозрачный <div> поверх текста. Однако это означает, что текст нельзя щелкнуть (например, щелкнуть ссылки или выделить его). Можно ли было просто сделать этот div "невидимым" для кликов и других событий мыши?

Например, overlay div покрывает текст, но я бы хотел иметь возможность щелкнуть / выделить текст через overlay div:

<div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0;
                             left: 0; width: 100%; height:100%">
        ... some content ...
    </div>
 </div>

Answer 1

Это можно сделать с помощью CSS pointer-events. Это свойство поддерживается в Firefox 3.6+, Chrome 2+, IE 11+ и Safari 4+. К сожалению, я не знаю, как обходить разные браузеры.

#overlay {
  pointer-events: none;
}

Answer 2

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

См. Первый ответ на этот вопрос: HTML-оверлей, позволяющий кликам переходить к элементам за ним1004 *

Answer 3

Используйте этот jQuery

$("div").click(function(e){e.preventDefault();});

замените "div" идентификатором или элементом

Answer 4

Вы можете сделать это, скрыв оверлей так:

overlay.onclick = function(){
    window.event.srcElement.style.visibility = "hidden";
    var BottomElement = document.elementFromPoint((navigator.appName.substring(0,3) == "Net") ? e.clientX : window.event.x,(navigator.appName.substring(0,3) == "Net") ? e.clientY : window.event.y);
    window.event.srcElement.style.visibility = "visible";
    BottomElement.click();
}

Answer 5

Альтернативой для отключения всех событий (или цыплят) в div является unbind () все события, которые по умолчанию прикреплены с тегами

  $('#myDivId').unbind();

или

  $('#myDivId').unbind("click");