通过覆盖元素 <div> 传递鼠标点击答案

【问题标题】：Passing mouse clicks through an overlaying element <div>通过覆盖元素 <div> 传递鼠标点击
【发布时间】：2009-11-15 13:02:13
【问题描述】：

是否可以通过覆盖元素传递鼠标点击：

<div style="background: url('img/rain.png'); z-index: 100; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0;"></div>

到底层元素（段落、图片、链接等）？

或者换个说法：

有没有什么方法可以在 HTML、CSS 和/或 JavaScript 中创建纯粹的美学覆盖/图层？

【问题讨论】：

【解决方案1】：

这可以使用 CSS 解决：

div { pointer-events:none; }

受 IE 11+、Chrome、Firefox、Safari 和 Opera 支持。

【讨论】：

可能值得注意的是，根据您链接到的 MDN 页面上的兼容性表，IE 8 不支持此功能。
另外值得注意的是，这也会阻止所有其他指针事件点击覆盖，这可能不是预期的行为。
赞成，请注意 IE11 及更高版本支持它，而旧版 IE 可能部分支持 SVG 对象但不支持 HTML 对象：caniuse.com/#feat=pointer-events

【解决方案2】：

您可以尝试在单击事件中检索鼠标坐标，然后通过隐藏叠加层来检索元素，使用document.elementFromPoint(x, y)，然后重新显示叠加层。

有关 elementFromPoint 的更多信息，请参阅此 SO 问题：

【讨论】：

【解决方案3】：

我看到您使用的是“rain.24.png”，叠加层是动画的吗？就像您正在重新定位图像以模拟下雨一样？如果是这种情况，那么最好在 mousedown 时停止/隐藏动画，然后使用 mouseup 在底层元素上激活您的功能。

如果不是这样，则使用文森特的答案获取元素，然后调用关联函数或使用trigger 模拟点击

【讨论】：

【解决方案4】：

您可以将鼠标单击事件分配给覆盖 div，然后遍历您知道可能位于其下方的所有元素，检查它们的位置、宽度和高度以查看鼠标单击的位置是否在它们的边界内，并且如果是，请调用他们的 onclick 事件。

为了使可能元素的子集更小，你可以给可能在 div 下的可点击元素，一个特殊的类。

【讨论】：