removeEventListener 没有按我的预期工作

4回答

慕码人2483693

看看这个：document.getElementById('my-div').addEventListener('click', increase);function increase(event){  let div = document.getElementById(event.currentTarget.id);  let number = parseInt(div.innerHTML);  number += 5;  div.innerHTML = number;  div.removeEventListener('click', increase); //but it doesnt get removed..}<html>  <head>  </head>  <body>    <div id="my-div" style="background: green">      0    </div>  </body></html>

ITMISS

如果像这样动态添加事件侦听器，您的代码将起作用document.querySelector('div').addEventListener('click',increase(event));由于您已将属性 onclick 设置为元素，因此您可以在函数内使用案例中的元素引用设置 onclick=false div.onclick=false;运行它来检查它是否有效function increase(event){  let div = document.getElementById( event.currentTarget.id );  let number = parseInt(div.innerHTML);  number += 5;  div.innerHTML = number;  div.onclick=false;  console.log("On click is set to false");}    <div id="my-div" style="background: green" onclick="increase(event)">      0    </div>

一只名叫tom的猫

设置的侦听器不是increase，它基本上是一个() => increase(event)您没有引用的匿名函数。由于您将其设置为onclick属性，因此您需要做的就是div.onclick = null。但是，最好onclick一开始就不要使用，因为它依赖于全局范围内现有的函数，会妨碍代码和标记的正确分离，还会妨碍使用 CSP（内容安全策略）保护页面。如果您要像app.js这样调整事件侦听器......：document.getElementById('my-div').addEventListener('click', increase)...那么您用于删除侦听器的现有代码就可以工作。

翻翻过去那场雪

要删除内联事件处理程序，由于它没有附加addEventListener，因此您无法使用删除它removeEventListener。你可以使用removeAttribute：div.removeAttribute('onclick');但内联处理程序很糟糕，应该尽可能避免。最好用 Javascript 附加监听器addEventListener：document.querySelector('#my-div').addEventListener('click', increase);然后可以使用以下命令将其删除removeEventListener：document.querySelector('#my-div').removeEventListener('click', increase);看起来您只想允许一次单击，之后应该删除侦听器。如果是这种情况，那么使用起来会更容易，{ once: true }以便侦听器在单个事件后将自行删除：function increase(event){ div.textContent = 5 + Number(div.textContent); } document.querySelector('#my-div').addEventListener('click', increase, { once: true });（请注意，使用textContentover更快、更安全innerHTML- 仅在分配或检索 HTML 标记时使用innerHTML）