时间戳

首页 > 解决方案 > 在某些站点上，MouseEvent 对象的 x 和 y 值与 Debugger API 调度的 x 和 y 值不同

javascript - 在某些站点上，MouseEvent 对象的 x 和 y 值与 Debugger API 调度的 x 和 y 值不同

问题描述

我正在使用Chrome 的调试器 API将点击事件从扩展程序的后台脚本发送到页面。这是我用来调度事件的代码

背景.js

x=50
y=50
//tabId=<id>    //Add the tab's id to a tabId variable
mousePressedOptions={type:"mousePressed",x,y,button:"left",clickCount:1}
mouseReleasedOptions={type:"mouseReleased",x,y,button:"left",clickCount:1}

sendCommand(tabId,mousePressedOptions,sendCommand.bind(null,tabId,mouseReleasedOptions))

function sendCommand(tabId,options,callback=function(){}){
    chrome.debugger.sendCommand({tabId},
        "Input.dispatchMouseEvent",
        options,
        callback)
}

如您所见，我正在点 (x=50,y=50) 发送事件。然后在我的页面中，我在窗口对象上设置了一个简单的点击监听器，它只记录（x，y）坐标

索引.html

 function handleClick(e){
    console.log(e.x,e.y)
 }

window.addEventListener("click",handleClick)

当我在本地对此进行测试时，控制台记录的 (x,y) 值与我用来分派事件的值相同，这正是您所期望的。然而，当我在实际网站上进行测试时，其中一些会显示不同的结果，尤其是 google、facebook 和 reddit。

当我访问 google.com 并将 handleClick 代码注入 devtools 控制台窗口时，我得到 (45,45) 而不是 (50,50)。在不同的坐标上进行测试，它们似乎总是偏离 9.1%，向下舍入到最接近的整数。因此，如果我在 (100,200) 上分派，页面将显示 (90,181)，而对于 (400,1000)，它将显示 (363,909)，依此类推。这个问题只发生在某些网站上，而不是我提到的所有网站上。但奇怪的是，显示错误值的网站都以相同的百分比关闭。因此，对于在 (50,50) 上调度的事件，它将在 google、reddit、facebook 等上显示相同的错误值 (45,45)。

那么是什么导致了调试器发送的值和事件对象接收到的值之间的这种差异呢？我不应该考虑什么价值？

谢谢你。

标签： javascriptgoogle-chromegoogle-chrome-extensiongoogle-chrome-devtools

解决方案

推荐阅读