通过覆盖元素<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问题:

如何找到位于给定(X,Y)位置的DOM节点？(命中测试)