鼠标移动事件在外部来源中不触发？

Question

鼠标移动事件在外部来源中不触发？

javascripthtmlasp.netmouseeventonmousemove

7

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

以下是说明问题的示例代码：

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上）？我尝试在mouseEvent函数的开头添加event.preventDefault();，但这并没有帮助解决问题。我猜测外部网页正在夺取我的focus。这是真的吗？有没有办法实时更新X和Y坐标？

- Code Doggo

将事件附加到 window 上。可能是同源策略阻止了来自污染对象的事件。 - adeneo

@adeneo 这个方法不起作用。我已经在HTML文档的脚本部分添加了以下代码 $(window).mousemove(mouseMove(event));。问题仍然存在。 - Code Doggo

1

你可以看一下这个答案。据我所知，你可能处于“运气不佳”的情况。 - ConnorsFan

1

这里有一个类似问题的另一个答案：https://dev59.com/AHE95IYBdhLWcg3wRL0t#2381484。 - ConnorsFan

@ConnorsFan，是的，我开始意识到这似乎是不可能的。我知道如果我在C++和/或任何非Web语言中进行此操作，我可以完全按照自己的意愿进行操作，但我想你不能在浏览器中这样做。我曾经认为我可能会拦截鼠标事件并将它们传递给两个不同的div，但现有的解决方案都无法正常工作。我很快就会发布一个答案，详细说明一切，但在此期间，我将等待看看是否有人有什么巧妙的方法。 - Code Doggo

2个回答

1

为什么它不起作用###

让我来为您澄清一下...

因为iframes或objects被设计为从您的网站到请求的源的简单虫洞，它们有自己的功能和对象！

有很多技巧可以用来确定光标轴而无法与虫洞交互，但是如果您确实想与其交互，还有其他方法...

如何使其工作###

其中之一是老式的ajax，使用它可以在一个div上加载整个网站，并且甚至可以比虫洞做更多事情！由于使用ajax，您将网页分解为其骨架，不仅可以获取X和Y，还可以个性化您的页面=）

由于这是ajax，您可以对其进行大量操作，并构建自己的搜索字段并仅获取所需搜索引擎的结果和链接（因为这是您的项目）或者您只需在div或任何其他元素上加载整个页面。

如果你和 XML 不太合拍（就像我一样），JQUERY 可以帮上忙。

- legend

你能否提供对上述代码的修改？我理解你的意思，但我的尝试都没有成功。我真的开始觉得这是不可能的了，但如果你有一个解决方案适用于我上面的小例子，请在此帖子中发布编辑。如果你提供一个可行的示例，我会给你奖励。 - Code Doggo

请查看https://W3Schools.com，它的搜索字段将数据发送到谷歌，然后接收结果并对其进行分类！但由于Ajax是为内部来源设计的，为了使其与外部来源配合工作，您打算展示的网站必须启用一个功能，您可以从中发送和接收数据，大多数搜索引擎都这样做... - legend

考虑到这一点：如果您找到了一种使用ajax与网站配合的方法，因为它超出了这些方法的范围，那么需要使用很多技巧才能使其正常工作！因此，我建议您明确您的最终意图，以获取光标轴，这样我们可能能够帮助您。 - legend

所以，从技术上讲，你的回答并不是我的问题的答案。W3Schools.com搜索字段正在访问与之接口的Google API之一。它会返回搜索结果，而不是包含所有图形的实际HTML页面。我开始看到这是不可能的。我唯一可能看到它起作用的方法是手动配置所有POST / GET请求，但即使这样做也可能不一定有效。如果您不确定如何将工作附件添加到我的示例中，则很快我会发布解释为什么它无法工作的帖子。 - Code Doggo

我明确提到了使用iframes或objects的方式是不可行的！但由于我是一个“没有什么不可能”的人，我建议使用Ajax，这是完全可行的，但很难...所以如果我是你，而且我想做到这一点，我会去做！但也要考虑这一点：你必须自己完成所有工作，只留下请求部分给Ajax！因此，请全面评估它是否值得，我的回答是告诉你用你的方式是不可行的，但有另一种方式！而且这是难以置信的困难...祝你好运。 - legend

顺便说一下，我没有给你提供一个“工作附件”的原因是我之前尝试过了...这不是一种插件式的方法！它取决于你的项目而有所不同。 - legend

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Will · Accepted Answer

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>