通过覆盖元素<div> </div>传递鼠标单击

Question

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

<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中创建纯粹的美学叠加层？

Answer 1

这可以使用CSS解决：

div { pointer-events:none; }

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

更多详情：https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Answer 2

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

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

How do I find the DOM node that is at a given (X,Y) position? (Hit test)

Answer 3

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

如果不是这样，那么使用Vincent的答案来获取元素，然后调用相关函数或使用trigger来模拟点击

Answer 4

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

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