onmousemove 事件不会从外部源触发？

Posted 2023-02-16

技术标签:

【中文标题】onmousemove 事件不会从外部源触发？【英文标题】：onmousemove event does not fire from within external source? 【发布时间】：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。据我了解，您可能处于“倒霉”的境地。这是对类似问题的另一个答案：***.com/a/2381484/1009922。 @ConnorsFan 是的，我开始意识到这是不可能的。我知道如果我使用 C++ 和/或任何非 Web 语言执行此操作，我可以完全按照我的意愿执行此操作，但我想您不能在浏览器中执行此操作。我想我可能会拦截鼠标事件并将它们中继到两个不同的 div，但那里的解决方案一直不起作用。我很可能会很快发布一个详细说明所有内容的答案，但与此同时，我会等着看是否有人有任何巧妙的裂缝 【参考方案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！所以对它是否值得做一个全面的评估，我的回答是试图告诉你这是不可行的，但还有另一种方法！这真是难以置信的困难......！祝你好运芽

以上是关于onmousemove 事件不会从外部源触发？的主要内容，如果未能解决你的问题，请参考以下文章

浅谈js事件监听

js on绑定事件

JS事件：onmouseover onmouseout &&onmouseenter onmouseleave &&onmousemove的区别

事件（event），正则

javascript语句语义大全

在 AWS Lambda 中不会触发 on exit 事件