也从 iframe 接收 mousemove 事件

Posted 2023-05-09

【中文标题】也从 iframe 接收 mousemove 事件

【英文标题】：Receive mousemove events from iframe, too

【发布时间】：2015-12-29 05:50:03

【问题描述】：

我有一个 javascript 应用程序，它为文档添加了一个 mousemove 侦听器。问题： 当鼠标移到 iframe 上时，不会调用该函数。

有没有办法将此类事件传递到根文档？

【参考方案1】：

将pointer-events: none; 放入框架的样式中。

我自己也遇到过这个问题，发现这个解决方案效果很好，而且非常简单！

【讨论】：

是的；这是正确的，但它会禁用所有其他事件，如滚动或突出显示。

@Ashraf 工作正常指针事件：无；但它禁用了 iframe 加载文档上的所有其他事件，你是如何解决这个问题的。谢谢

我在我的 css 中声明了 body.dragging iframe pointer-events: none; 并仅在需要触发 mousemove 时设置了 document.body.classList.add('dragging');。

【参考方案2】：

您应该查看将父 document 事件绑定与 document.getElementById('iFrameId').contentDocument 事件结合起来，女巫允许您访问 iFrame 内容元素。

https://***.com/a/38442439/2768917

function bindIFrameMousemove(iframe)
    iframe.contentWindow.addEventListener('mousemove', function(event) 
        var clRect = iframe.getBoundingClientRect();
        var evt = new CustomEvent('mousemove', bubbles: true, cancelable: false);

        evt.clientX = event.clientX + clRect.left;
        evt.clientY = event.clientY + clRect.top;

        iframe.dispatchEvent(evt);
    );
;

bindIFrameMousemove(document.getElementById('iFrameId'));

【讨论】：

非常感谢，你帮了我很大的忙。

【参考方案3】：

如果 iframe 中的文档在同一个 document.domain 上，您可以很容易地做到这一点。

如果您有相同的 document.domain，您还必须在 iframe 中设置 mousemove 侦听器并将值传递给父页面。

如果文档不在同一个 document.domain 上，它会变得相当复杂，并且您将需要 iframe 页面来运行设置 mousemove 事件侦听器的 javascript 本身。然后您可以按照此处所述进行跨帧通信：http://softwareas.com/cross-domain-communication-with-iframes

否则，由于浏览器强制执行相同的源策略，您将不走运。

【讨论】：

好的，那我必须用透明的 div 来做，它在 iframe 上。

我喜欢透明 div 的想法，但是你如何将鼠标事件从 iframe 传递回父级？

只需将它作为参数传递给您选择的函数调用:)

【参考方案4】：

我刚才遇到了同样的问题，我想出了这个：

$("iframe").contents().find("body").mousemove(function(cursor)
        $("#console").html(cursor.pageX+":"+cursor.pageY);
    );
    $(document).mousemove(function(cursor)
        $("#console").html(cursor.pageX+":"+cursor.pageY);
    );

.contents().find("body") 抓取 iframe 内的内容，.mousemove() 可用于添加事件监听器

测试 html...

<div id="console"></div>

【参考方案5】：

虽然指针事件：无；在框架的样式中可以解决这个问题，但它禁用了 iframe 中的任何其他事件，我的解决方案是切换值，如：

pointer-events : isMoving? 'none' : 'all' 

【参考方案6】：

这对我有用，将父文档事件绑定与 document.getElementById('iFrameId').contentDocument 事件结合起来，女巫允许您访问 iFrame 内容元素。

https://***.com/a/38442439/2768917

function bindIFrameMousemove(iframe)
    iframe.contentWindow.addEventListener('mousemove', function(event) 
        var clRect = iframe.getBoundingClientRect();
        var evt = new CustomEvent('mousemove', bubbles: true, cancelable: false);

        evt.clientX = event.clientX + clRect.left;
        evt.clientY = event.clientY + clRect.top;

        console.log(evt);
        iframe.dispatchEvent(evt);
    );
;

bindIFrameMousemove(document.getElementById('iFrameId'));