javascript 也从 iframe 接收 mousemove 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5261328/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Receive mousemove events from iframe, too
提问by Van Coding
I have a javascript app, whichs adds a mousemove listener to the document. Problem: When the mouse is moved over an iframe, the function is NOT called.
我有一个 javascript 应用程序，它向文档添加了一个 mousemove 侦听器。问题：当鼠标移到 iframe 上时，不会调用该函数。
Is there a way to pass through such events to the root document?
有没有办法将此类事件传递到根文档？
采纳答案by Martin Jespersen
You can do that quite easily if the document in the iframe is on the same document.domain.
如果 iframe 中的文档在同一个 document.domain 上，您可以很容易地做到这一点。
If you have the same document.domain, you will have to set a mousemove listener in the iframe as well and pass the values out to the parent page.
如果您有相同的 document.domain，则还必须在 iframe 中设置 mousemove 侦听器并将值传递给父页面。
If the documents are not on the same document.domain it becomes quite a bit mroe complex, and you will need the iframes page to run javascript itself that sets the mousemove event listener. and then you can do cross frame communication as described here: http://softwareas.com/cross-domain-communication-with-iframes
如果文档不在同一个 document.domain 上，它会变得相当复杂，您将需要 iframes 页面来运行 javascript 本身来设置 mousemove 事件侦听器。然后您可以按照此处所述进行跨框架通信：http: //softwareas.com/cross-domain-communication-with-iframes
Otherwise you are out of luck due to the same origin policy that browsers enforce.
否则，由于浏览器强制执行的同源策略，你就不走运了。
回答by cloudonshore
Put pointer-events: none;in the styles for the frame.
放入pointer-events: none;框架的样式。
I was having this problem myself and found this solution works great and is so simple!
我自己也遇到了这个问题，发现这个解决方案很好用，而且非常简单！
回答by Andrii Verbytskyi
You should look through combining parent documentevent binding with document.getElementById('iFrameId').contentDocumentevent, witch allows you to get access to iFrame content elements.
您应该查看将父document事件绑定与事件结合起来 document.getElementById('iFrameId').contentDocument，女巫允许您访问 iFrame 内容元素。
https://stackoverflow.com/a/38442439/2768917
https://stackoverflow.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'));
回答by mark
I was having the same problem just now and I came up with this:
我刚才遇到了同样的问题，我想出了这个：
$("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")grabs the contents inside the iframe and .mousemove()can be used to add an event listener
.contents().find("body")抓取 iframe 内的内容，.mousemove()可用于添加事件侦听器
Test html...
测试html...
<div id="console"></div>
回答by paraofheaven
Though pointer-events: none; in the styles for the frame can solve this problem,but it disabled any other events in iframe,my solution is to toggle the value like:
虽然指针事件：无；在框架的样式中可以解决这个问题，但它禁用了 iframe 中的任何其他事件，我的解决方案是切换值，如：
{{pointer-events : isMoving? 'none' : 'all' }}
回答by dieb
THIS WORKS FOR ME combining parent document event binding with document.getElementById('iFrameId').contentDocument event, witch allows you to get access to iFrame content elements.
这对我有用，将父文档事件绑定与 document.getElementById('iFrameId').contentDocument 事件相结合，女巫允许您访问 iFrame 内容元素。
https://stackoverflow.com/a/38442439/2768917
https://stackoverflow.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'));
