【问题标题】：onmousemove event does not fire from within external source?onmousemove 事件不会从外部源触发？
【发布时间】：2017-12-27 22:25:00
【问题描述】：

我正在我网页的一个 div 中加载一个外部网页（即本示例中的 www.duckduckgo.com）。我想在 div 内部和外部获取鼠标 X 和 Y 位置，但是当我在 div 内部时，网页似乎阻止了 onmousemove 事件的触发。但是，onmouseover 事件在进入 div 时只触发一次。

这是说明我的问题的示例代码：

function mouseEvent(event) {
      var x = event.clientX;
      var y = event.clientY;

      document.getElementById('label').innerHTML = 'X=' + x + ' Y=' + y;
}

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;        
    overflow: hidden;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}
#form1 {
    height: 100%;
    width: 100%;
}
#pageDiv {
    height: 100%;
    width: 100%;
}
#page {
    height: 100%;
    width: 100%; 
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div id="pageDiv"> 
            <label id="label">hello</label>
            <object id="page" type="text/html" data="https://duckduckgo.com/" onmousemove="mouseEvent(event)" onmouseover="mouseEvent(event)">
            </object>
        </div>
    </form>
</body>
</html>

如何在此网页上的任何位置获取鼠标 X 和 Y 位置（即不仅仅是在包含外部源的 div 顶部）？我尝试将event.preventDefault(); 添加到 mouseEvent 函数的开头，但这在帮助领域没有任何作用。

我猜外部网页正在偷走我的焦点。是这样吗？无论如何我可以实现恒定的 X 和 Y 坐标更新吗？

【问题讨论】：

将事件附加到window。可能是同源策略正在防止来自受污染对象的事件。
@adeneo 那行不通。我将以下代码 $(window).mousemove(mouseMove(event)); 添加到我的 html 文档的脚本部分。问题依然存在。
你可以看看this answer。据我了解，您可能处于“倒霉”的境地。
这是对类似问题的另一个答案：stackoverflow.com/a/2381484/1009922。
@ConnorsFan 是的，我开始意识到这是不可能的。我知道如果我使用 C++ 和/或任何非 Web 语言执行此操作，我可以完全按照我的意愿执行此操作，但我想您不能在浏览器中执行此操作。我想我可能会拦截鼠标事件并将它们中继到两个不同的 div，但那里的解决方案一直不起作用。我很可能会很快发布一个详细说明所有内容的答案，但与此同时，我会等着看是否有人有任何巧妙的裂缝

标签： javascript html asp.net mouseevent onmousemove

【解决方案1】：

function mouseEvent(event) {
      var x = event.clientX;
      var y = event.clientY;

      document.getElementById('label').innerHTML = 'X=' + x + ' Y=' + y;
}

function removeCheat() {
     // remove cheat div or remove right/bottom position. 
     // Not sure what your ultimate goal is.
}

html {
    height: 100%;
    width: 100%;
}
body {
    height: 100%;
    width: 100%;        
    overflow: hidden;
    margin-left: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
}
#form1 {
    height: 100%;
    width: 100%;
}
#pageDiv {
    height: 100%;
    width: 100%;
}
#page {
    height: 100%;
    width: 100%; 
}
#cheat {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <div id="cheat" onmousemove="mouseEvent(event)" onmouseover="mouseEvent(event)" onmousedown="removeCheat()"></div>
    <form id="form1" runat="server">
        <div id="pageDiv"> 
            <label id="label">hello</label>
            <object id="page" type="text/html" data="https://duckduckgo.com/">
            </object>
        </div>
    </form>
</body>
</html>

【讨论】：

这很好，除了我的鼠标点击不会再扔到对象（即 iframe）上。看一下，你不能再点击“duckduckgo”网站了；你不能再与网站互动了。我会玩它，但如果你也能做到这一点，我会接受你的回答作为解决方案。

【解决方案2】：

为什么它不起作用###

让我为你直截了当...

由于 iframe 或对象被设计成一个简单的虫洞，从您的网站到请求的来源，它们有自己的功能和对象！

你可以玩很多技巧来确定光标的轴不可能与虫洞交互，但如果你确实想与它交互，还有其他方法......

如何让它工作###

其中一个是旧的 ajax ，使用它你可以在一个 div 上加载整个网站，甚至比在虫洞上做的还要多！因为使用 ajax，您可以将网页分解为骨架，您不仅可以获得 X 和 Y，甚至可以个性化您的页面 =)

因为它是 ajax，你可以疯狂地使用它并建立自己的搜索字段，并且只从所需的搜索引擎获取结果和链接（因为那是你的项目）或者你可以简单地加载整个div 或任何其他元素上的页面。

如果你和 XML 像我一样相处不好，JQUERY 可以伸出援手

【讨论】：

您能否提供对上述代码的修改？就像我明白你在说什么，但我的尝试没有成功。我真的开始认为这是不可能的，但如果你对我上面的小例子有解决方案，请在这篇文章中发布一个编辑。如果你提供一个工作示例，我会给你赏金
结帐W3Schools.com，它的搜索字段将数据发送到google，然后接收结果并对其进行分类！但是由于 Ajax 是为内部资源设计的，以便使其与外部资源一起使用您打算展示的网站必须启用一个功能，您可以发送和接收大多数搜索引擎所做的数据......
并考虑一下：如果您找到一种在网站上使用 ajax 的方法，因为它超出了这种方法的范围，那么需要很多技巧才能使其正常工作！因此，我建议您为我们制定获得光标轴的最终意图可能会对您有所帮助
所以，从技术上讲，您的回答并不能真正回答我的问题。 W3Schools.com 搜索字段正在访问与之交互的 Google API 之一。它正在返回搜索结果，而不是包含所有图形的实际 html 页面。这是不可能的，我开始看到了。我可能看到它工作的唯一方法是手动配置所有 POST/GET 请求，但即使这样做也不一定有效。如果您不确定如何获得我的示例的有效附件，那么我将很快发布解释为什么它不能工作。
我确实提到了使用 iframe 或对象的方式是不可行的！但由于我是一个“没有什么不可能”的人，我建议使用 Ajax，这是完全可行的，但很难......所以如果我是你并且我想这样做，我会这样做！但也要考虑这一点：您必须自己做所有事情，只将请求部分留给 Ajax！所以对它是否值得做一个全面的评估，我的回答是试图告诉你这是不可行的，但还有另一种方法！这真是难以置信的困难......！祝你好运芽