我知道有類似問題的問題，但我不明白如何解決該問題。我需要解決這個問題：我在 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 關注
- 154 瀏覽
添加回答
舉報
0/150
提交
取消