HTML / CSS：让一个div“隐身”点击？

由于各种原因，我需要在某些文本上放置（大部分）透明的<div> 。 但是，这意味着文本不能被点击（例如，点击链接或select它）。 是否有可能简单地使这个div“隐身”点击和其他鼠标事件？

例如， overlay div覆盖文字，但我希望能够通过overlay div点击/select文本：

 <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“覆盖”，它允许点击落在它后面的元素

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

Answer 4

禁用div上的所有事件（或小鸡）的替代方法是unbind（）默认情况下附带标记的所有事件

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

要么

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