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

Question

For various reasons, I need to put a (mostly) transparent

over some text. However, this means that the text can\'t be clicked (eg, to click links or

相关标签:

Answer 1

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

Answer 2

Use this jQuery

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

replace "div" with the ID or element

Answer 3

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");

Answer 4

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

Answer 5

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