将鼠标点击通过叠加元素< div> [英] Passing mouse clicks through an overlaying element <div>

问题描述

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

Is it possible to pass mouse clicks through an overlaying element: -

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

...将鼠标点击它下面的底层元素（例如，

...pass mouse clicks beneath it to underlaying elements (e.g. a web page with images, links, etc)?

考虑另一种方式来表达这个...有什么方法在HTML（5），CSS（3）中创建纯粹的美学覆盖/和/或JavaScript / jQuery？

Thinking of another way to word this... Is there any way of creating a purely aesthetic overlay/layer in HTML(5), CSS(3) and/or JavaScript/jQuery?

提前感谢，对不起，如果这个问题不太清楚。

Thanks in advance, and sorry if this question isn't too clear.

推荐答案

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

You could try to retrieve the mouse coordinates in your click event and then retrieve an element by hiding your overlay, use document.elementFromPoint(x, y) and then redisplay the overlay.

关于elementFromPoint的信息：

See this SO question for more info about elementFromPoint:

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

这篇关于将鼠标点击通过叠加元素< div>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！