如何检测重叠元素下的点击？

我有两个HTML文档， b.html包含使用iframe c.html 。

在b.html我需要绘制一些DIV（在我的示例中为id = selector），它部分覆盖了iframe可视化的c.html内容。

我需要在DIV选择器下获取与鼠标坐标对应的DOM元素的ID。

目前在c.html直接使用document.elementFromPoint()可以部分工作，就像鼠标在DIV选择器上时一样，我无法识别c.html中的c.html DOM元素（在本例中为DIV c）。

我需要知道：

• 是否可以使用document.elementFromPoint（）或任何其他方法选择另一个元素？
• 什么是可能的替代解决方案可能使用DOM和本机API？

这里的示例（请查看Chrome中的控制台）：

http://jsfiddle.net/s94cnckm/5/

———————————————– b.html

       window.app = { start: function () { } };   #selector { position: absolute; top: 150px; left: 150px; width: 250px; height: 250px; -webkit-box-shadow: 0px 0px 0px 5px yellow; -moz-box-shadow: 0px 0px 0px 5px yellow; box-shadow: 0px 0px 0px 5px yellow; } #iframe { width: 500px; height: 500px; border: none; }    
SELECTOR
    

———————————————– c.html

      window.app = { start: function () { document.querySelector('body').addEventListener('mousemove', function (event) { //console.log(event.pageX, event.pageY, event.target.id); var item = document.elementFromPoint(event.pageX, event.pageY); console.log(item.id); }.bind(this)); } };   body { background-color: lightslategray; } #a { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: green; z-index: 2; } #b { position: absolute; top: 100px; left: 100px; width: 100px; height: 100px; background-color: #ffd800; z-index: 1; }    
Content
 
a
 
b
   

Answer 1

可能的解决方法是使用pointer-events 。

CSS属性指针事件允许作者控制特定图形元素在什么情况下（如果有的话）可以成为鼠标事件的目标。 如果未指定此属性，则visiblePainted值的相同特征将应用于SVG内容。

申请时

 #selector { /* ... */ pointer-events: none; } 

#selector和元素本身的所有内容都不再具有交互性。 可能未选择内容，并且以下事件:hover或click不适用。

以下是上述css的演示： http ： //jsfiddle.net/s94cnckm/6/

Answer 2

另一种可能的解决方案是捕获在屏蔽项（DIV.selector）上触发的鼠标事件的文档坐标，暂时隐藏该屏蔽项，然后询问文档在该坐标位置下的内容（使用document.elementFromPoint（x， y））再次显示屏蔽项目之前。

对document.elementFromPoint（）的支持也涵盖了旧版本的IE。 不幸的是， 指针事件对旧版IE的支持有限。

这是一个工作示例：

http://jsfiddle.net/s94cnckm/14/

  document.getElementById('iframe').contentDocument.addEventListener('click', function (event) { alert(event.target.id); }.bind(this)); document.getElementById('selector').addEventListener('click', function (event) { var selector = document.getElementById('selector'); selector.style.display = 'none'; var item = document.getElementById('iframe').contentDocument.elementFromPoint(event.pageX, event.pageY); selector.style.display = ''; alert(item.id); }.bind(this)); 

关于pointer-events的使用我链接提到一些相关的文章，包括解决旧版本的IE。

如何使Internet Explorer模拟指针事件：无？

https://css-tricks.com/almanac/properties/p/pointer-events/

http://davidwalsh.name/pointer-events

http://robertnyman.com/2010/03/22/css-pointer-events-to-allow-clicks-on-underlying-elements/

此解决方案受到本文的启发：

http://www.vinylfox.com/forwarding-mouse-events-through-layers/