用户脚本 addEventListener 似乎没有附加到元素

我正在尝试将 onclick 事件侦听器附加到现有元素（特别是不是button with a form，这是一个简单的div）通过用户脚本在网页上。然而，据我所知，即使在匿名函数中添加事件侦听器不应与现有用户脚本的超时规则发生冲突，它也不会附加任何内容（或者可能，它does，但随后用户脚本超时并且匿名函数停止存在，导致事件侦听器消失。我是否误解了用户脚本范围的一些基本内容？

我尝试通过以下方式将其连接到按钮。这不是由将outerHTML 重新绑定到自身的某些模糊竞争条件引起的，因为即使没有该行，也不会添加事件侦听器。

var button = document.getElementById("button");
button.outerHTML = button.outerHTML; // removes all existing event listeners on the element
button.addEventListener("click", function() {
  window.alert("ping"); // or any other function body
}, false);

火狐浏览器112.0.2

它不起作用，因为当你这样做时button.outerHTML = button.outerHTML;您最初引用的按钮不再是 DOM 中的按钮。您正在用新按钮替换该按钮。

您需要再次选择该按钮。

var button = document.getElementById("button");
button.outerHTML = button.outerHTML; // removes all existing event 

button = document.getElementById("button");
button.addEventListener("click", function() {
  window.alert("ping"); 
}, false);

<button id="button">click</button>