如何防止一个用户脚本中附加的事件处理程序干扰另一个用户脚本？

Question

我安装了两个单独的用户脚本，每个都需要使用 document.body.onkeydown 调用一些代码。但是，我注意到在启用两个用户脚本的情况下，只会调用后一个事件处理程序。

显然，两个用户脚本共享同一个 DOM。这与我使用 Chrome 扩展的经验相反，其中每个 Chrome 扩展都有自己的沙箱。

不管怎样，现在我该如何解决这个问题？我希望两个处理程序都触发，并保持彼此分离。

我正在启用严格模式的 IIFE 中执行我的用户脚本。

Answer 1

您可以更改它们以使用

document.body.addEventListener("keydown", function(){ ... })

如果他们使用 onkeydown 方法中的 'this' 设置，您可能需要确保设置正确

document.body.addEventListener("keydown", (function(){ ... }).bind(document.body))

Answer 2

使用document.body.keydown 会将回调设置为keydown 事件。再次设置它会取代旧的。因此后一个脚本的事件回调被触发。

而是在两者中使用 document.body.addEventListener(<callback>)，这样两个事件都会出现。

在下面的示例中，第一个 keydown 将被第二个 keydown 覆盖。 addEventListener 会将侦听器附加到 keydown 事件。所以在按下 a 时只触发了第三个事件。按下 b 时，第二个和第三个都被触发。

这是因为通过旧方法添加的事件是作为类似属性值添加的。喜欢，

<button id="show" onclick="show()">Click</button> 因此，它被替换了。

addEventListener 将侦听器添加到 DOM 对象的 EventListners 列表中。

在示例中，我通过旧方法将 onclick 属性替换为函数 hide，因此它仅调用 hide 方法。

更多信息请参考MDN Docs

document.body.onkeydown = function(event){if(event.key=="a")console.log("keydown")};
document.body.onkeydown = function(event){if(event.key=="b")console.log("b keydown")};

document.body.addEventListener("keydown",function(){console.log("addEventListener")})

function show(){console.log("show")}
function hide(){console.log("hide")}

var element = document.getElementById("show");
element.onclick=hide;

<button id="show" onclick="show()">Click</button>

如何防止一个用户脚本中附加的事件处理程序干扰另一个用户脚本？

How to prevent event handler attached in one userscript from interfering with another?

javascript

userscripts