Question

我有两个HTML文档，b.html包含使用c.html的{{1}}。

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

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

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

我需要知道：

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

此处示例（请查看Chrome中的控制台）：

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

----------------------------------------------- b.html

c.html

----------------------------------------------- c.html

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>B</title>
    <script type="text/javascript">
        window.app = {
            start: function () {
            }
        };
    </script>
    <style>
        #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;
        }
    </style>
</head>
<body onload="app.start();">
    <div id="selector">SELECTOR</div>
    <iframe id="iframe" src="c.html"></iframe>
</body>
</html>

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。不幸的是，pointer-events对旧版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的问题。

How to make Internet Explorer emulate pointer-events:none?

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/

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

2 个答案: