我知道有類似問(wèn)題的問(wèn)題，但我不明白如何解決該問(wèn)題。我需要解決這個(gè)問(wèn)題：我在 html 文檔中添加了一個(gè) onClick 偵聽(tīng)器，然后，在 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...}就像我無(wú)法定位 html 文件中添加的事件偵聽(tīng)器一樣。我怎樣才能瞄準(zhǔn)它？
4 回答
慕碼人2483693
TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超9個(gè)贊
看看這個(gè)：
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貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超8個(gè)贊
如果像這樣動(dòng)態(tài)添加事件偵聽(tīng)器，您的代碼將起作用
document.querySelector('div').addEventListener('click',increase(event));
由于您已將屬性 onclick 設(shè)置為元素，因此您可以在函數(shù)內(nèi)使用案例中的元素引用設(shè)置 onclick=false
div.onclick=false;
運(yùn)行它來(lái)檢查它是否有效
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貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個(gè)贊
設(shè)置的偵聽(tīng)器不是increase，它基本上是一個(gè)() => increase(event)您沒(méi)有引用的匿名函數(shù)。
由于您將其設(shè)置為onclick屬性，因此您需要做的就是div.onclick = null。
但是，最好onclick一開(kāi)始就不要使用，因?yàn)樗蕾囉谌址秶鷥?nèi)現(xiàn)有的函數(shù)，會(huì)妨礙代碼和標(biāo)記的正確分離，還會(huì)妨礙使用 CSP（內(nèi)容安全策略）保護(hù)頁(yè)面。
如果您要像app.js這樣調(diào)整事件偵聽(tīng)器......：
document.getElementById('my-div').addEventListener('click', increase)
...那么您用于刪除偵聽(tīng)器的現(xiàn)有代碼就可以工作。
翻翻過(guò)去那場(chǎng)雪
TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個(gè)贊
要?jiǎng)h除內(nèi)聯(lián)事件處理程序，由于它沒(méi)有附加addEventListener，因此您無(wú)法使用 刪除它removeEventListener。你可以使用removeAttribute：
div.removeAttribute('onclick');但內(nèi)聯(lián)處理程序很糟糕，應(yīng)該盡可能避免。最好用 Javascript 附加監(jiān)聽(tīng)器addEventListener：
document.querySelector('#my-div').addEventListener('click',?increase);然后可以使用以下命令將其刪除removeEventListener：
document.querySelector('#my-div').removeEventListener('click',?increase);看起來(lái)您只想允許一次單擊，之后應(yīng)該刪除偵聽(tīng)器。如果是這種情況，那么使用起來(lái)會(huì)更容易，{ once: true }以便偵聽(tīng)器在單個(gè)事件后將自行刪除：
function?increase(event){
??div.textContent?=?5?+?Number(div.textContent);
}
document.querySelector('#my-div').addEventListener('click',?increase,?{?once:?true?});（請(qǐng)注意，使用textContentover更快、更安全innerHTML- 僅在分配或檢索 HTML 標(biāo)記時(shí)使用innerHTML）
- 4 回答
- 0 關(guān)注
- 168 瀏覽
添加回答
舉報(bào)
0/150
提交
取消