Javascript 使重叠的div“不可点击”以便可以访问下面的内容？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7700051/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make overlapping div "not clickable" so that content below can be accessed?
提问by pufAmuf
I am using a JPG overlay with a reduced opacity for an effect, however I want it as an effect only and make the content below that div clickable. Is that possible, thanks :)))
我正在使用具有降低不透明度的 JPG 叠加层来实现效果，但是我希望它仅作为效果并使该 div 下方的内容可点击。可以吗，谢谢:)))
Thanks for your comments everyone. I guess I'll have to think of something else because the JPEG covers the whole page :)
谢谢大家的评论。我想我得想点别的了，因为 JPEG 覆盖了整个页面:)
回答by Andy
Well there is pointer-events:none;but only few browsersmodern browsers (and IE11) support it.
好吧，pointer-events:none;只有少数浏览器现代浏览器（和 IE11）支持它。
回答by Naeem Ul Wahhab
Yes, its possible
是的，有可能
Use pointer-events: nonealong with conditional statements of CSS for IE11 (as it does not work in IE10 or below), you can get a cross browser compatible solution to achieve this.
使用pointer-events: none与IE11 CSS的条件语句一起（因为它不工作，IE10或以下），就可以得到一个跨浏览器兼容的解决方案来实现这一目标。
Using AlphaImageLoader, you can even put transparent .PNG/.GIFs in the overlay divand have clicks propagate through to elements lying bellow.
使用AlphaImageLoader，您甚至可以将透明.PNG/.GIFs 放在叠加层中，div并将点击传播到下面的元素。
CSS:
CSS：
pointer-events: none;
background: url('your_transparent.png');
IE11 conditional:
IE11 条件：
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;
Here is a basic example pagewith all the code.
这是一个包含所有代码的基本示例页面。
回答by maxedison
No, it's not. The overlaying element will always intercept the click. One possible workaround is to bind a clickevent to the overlaying element, and then get the current mouse position & compare that to the position of the element underneath in order to determine whether or not that element should register a click. But chances are there is a much better way of accomplishing this. Without seeing your code, however, I have no way of knowing.
不，这不对。覆盖元素将始终拦截点击。一种可能的解决方法是将click事件绑定到覆盖元素，然后获取当前鼠标位置并将其与下方元素的位置进行比较，以确定该元素是否应该注册点击。但有可能有更好的方法来实现这一点。但是，没有看到您的代码，我无法知道。
回答by Matoeil
one simple trick i have found, althoug not very w3c, is to encapsulate the div into a span and use that span class to make the overlay. That way the whole thing will be clickable , and the div will behave like a div
我发现一个简单的技巧，虽然不是很 w3c，是将 div 封装到一个跨度中，并使用该跨度类来制作叠加层。这样整个事情都将是可点击的，并且 div 将表现得像一个 div
