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

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

Например, обложки div overlay покрывают текст, но я хотел бы иметь возможность щелкнуть/выбрать текст через 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>

Ответ 1

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

#overlay {
  pointer-events: none;
}

Ответ 2

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

См. первый ответ на этот вопрос: HTML "overlay" который позволяет щелчкам просачиваться к элементам за ним

Ответ 3

Вы можете сделать это, спрятав наложение следующим образом:

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();
}

Ответ 4

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

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

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

Ответ 5

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

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

или

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