Question

出于各种原因，我需要在某些文本上放置（大部分）透明<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>

Answer 1

可以使用CSS pointer-events完成。 Firefox 3.6 +，Chrome 2 +，IE 11+和Safari 4+支持此属性。不幸的是，我不了解跨浏览器的解决方法。

#overlay {
  pointer-events: none;
}

Answer 2

可以通过在暂时隐藏叠加层后重新启动事件来完成。

查看此问题的第一个答案： HTML "overlay" which allows clicks to fall through to elements behind it

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

使用此jQuery

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

替换＆＃34; div＆＃34;使用ID或元素

Answer 5

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

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

或

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

HTML / CSS：让点击“看不见”？

5 个答案: