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

по разным причинам, мне нужно поставить (в основном) прозрачный <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>
5 77
html css events

5 ответов:

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

#overlay {
  pointer-events: none;
}
139

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

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

2

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

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

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

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

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

0

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

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

или

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