我知道有类似问题的问题，但我不明白如何解决该问题。我需要解决这个问题：我在 html 文档中添加了一个 onClick 侦听器，然后，在 js 中我尝试删除它，但我不能。这是我的代码：<html> <head> </head> <body> <div id="my-div" style="background: green" onclick="increase(event)"> 0 </div> <script src="app.js"></script> </body></html>在js中：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 文件中添加的事件侦听器一样。我怎样才能瞄准它？
4 回答
慕码人2483693
TA贡献1860条经验 获得超9个赞
看看这个：
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
TA贡献1871条经验 获得超8个赞
如果像这样动态添加事件侦听器，您的代码将起作用
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的猫
TA贡献1906条经验 获得超3个赞
设置的侦听器不是increase，它基本上是一个() => increase(event)您没有引用的匿名函数。
由于您将其设置为onclick属性，因此您需要做的就是div.onclick = null。
但是，最好onclick一开始就不要使用，因为它依赖于全局范围内现有的函数，会妨碍代码和标记的正确分离，还会妨碍使用 CSP（内容安全策略）保护页面。
如果您要像app.js这样调整事件侦听器......：
document.getElementById('my-div').addEventListener('click', increase)
...那么您用于删除侦听器的现有代码就可以工作。
翻翻过去那场雪
TA贡献2065条经验 获得超14个赞
要删除内联事件处理程序，由于它没有附加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）
- 4 回答
- 0 关注
- 105 浏览
添加回答
举报
0/150
提交
取消