如何使重叠的div "不可点击"，以便可以访问下面的内容？

Question

我正在使用一个透明度降低的JPG叠加层作为效果，但我只想把它作为效果，使得该div下方的内容可点击。这是否可能，谢谢：)))

感谢大家的评论。我想我得想一些别的办法，因为JPEG覆盖了整个页面 :)

- pufAmuf

---

我认为正确的术语是“命中测试”；而且在网络上通常是不可能实现的。 - Gleno

我能想到的最快的方法是：将您的内容放入包装器中，使其略微透明，并将JPG放在其后面。 - Doug Avery

那很聪明，Doug，谢谢 :) - pufAmuf

嘿 @pufAmuf，你应该回到这个问题并接受Andy的答案，因为现在可以使用CSS实现，并且你当前接受的答案不再是最佳方式。 - Keavon

嗨@Keavon，我已经完成了。谢谢你提醒我！ - pufAmuf

@pufAmuf 哦，这个问题太旧了，我回答之后才意识到 :-D - Naeem Ul Wahhab

Answer 1

有一个叫做pointer-events:none;的属性，但只有少数浏览器现代浏览器（包括IE11）支持它。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

- Andy

---

请在此处查看浏览器支持情况：http://caniuse.com/#search=pointer-events - Khalizar

现代浏览器都支持此功能。 - Keavon

注意：您可以使用 pointer-events: auto 使元素再次可点击。 - Carl Smith

Answer 2

是的，这是可能的。

使用 pointer-events: none 以及 CSS 的条件语句来兼容 IE11（因为在 IE10 或更低版本中不起作用），您可以获得跨浏览器兼容的解决方案来实现此目的。

使用 AlphaImageLoader，您甚至可以将透明的 .PNG/.GIF 放入覆盖层 div 并使点击事件传播到下面的元素。

CSS：

pointer-events: none;
background: url('your_transparent.png');

IE11条件语句：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

这是一个包含所有代码的基本示例页面。 点击此处查看。

- Naeem Ul Wahhab

Answer 3

不，它不是。覆盖元素将始终拦截点击事件。一个可能的解决方法是将click事件绑定到覆盖元素上，然后获取当前鼠标位置并将其与下面的元素位置进行比较，以确定该元素是否应该注册点击事件。但很有可能有更好的方法来完成这个任务。但是，如果没有看到您的代码，我就无法知道。

- maxedison

Answer 4

我发现的一个简单技巧，虽然不太符合W3C标准，但是可以将div封装到span中，并使用该span类来创建覆盖层。这样整个区域都可以点击，而div将像div一样运行。

- Matoeil