HTML/CSS: Make a div “invisible” to clicks?

2019-01-06 13:48发布

问题:

For various reasons, I need to put a (mostly) transparent <div> over some text. However, this means that the text can't be clicked (eg, to click links or select it). Would it be possible to simply make this div "invisible" to clicks and other mouse events?

For example, the overlay div covers covers the text, but I would like to be able to click/select the text through the 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:

It can be done using CSS pointer-events. This property is supported in Firefox 3.6+, Chrome 2+, IE 11+, and Safari 4+. Unfortunately, I don't have knowledge of a cross-browser workaround.

#overlay {
  pointer-events: none;
}


回答2:

It can be done by refiring the event after you temporarily hide the overlay.

See the first answer to this question: HTML "overlay" which allows clicks to fall through to elements behind it



回答3:

You can do this by hiding the overlay like this:

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:

Use this jQuery

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

replace "div" with the ID or element



回答5:

Alternative for disabling all events(or chick) on a div is unbind() all event that are attached with tags by default

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

or

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


标签: html css events