首頁猿問 removeEventListen...

removeEventListener 沒有按我的預(yù)期工作

Html5

SMILET 2023-10-17 16:59:59

我知道有類似問題的問題，但我不明白如何解決該問題。我需要解決這個問題：我在 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 文件中添加的事件偵聽器一樣。我怎樣才能瞄準(zhǔn)它？

查看完整描述

4 回答

慕碼人2483693

TA貢獻(xiàn)1860條經(jīng)驗(yàn) 獲得超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>

0

</div>

</body>

</html>

反對回復(fù) 2023-10-17

ITMISS

TA貢獻(xiàn)1871條經(jīng)驗(yàn) 獲得超8個贊

如果像這樣動態(tài)添加事件偵聽器，您的代碼將起作用

document.querySelector('div').addEventListener('click',increase(event));

由于您已將屬性 onclick 設(shè)置為元素，因此您可以在函數(shù)內(nèi)使用案例中的元素引用設(shè)置 onclick=false

div.onclick=false;

運(yùn)行它來檢查它是否有效

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");

}

0

</div>

反對回復(fù) 2023-10-17

一只名叫tom的貓

TA貢獻(xiàn)1906條經(jīng)驗(yàn) 獲得超3個贊

設(shè)置的偵聽器不是increase，它基本上是一個() => increase(event)您沒有引用的匿名函數(shù)。

由于您將其設(shè)置為onclick屬性，因此您需要做的就是div.onclick = null。

但是，最好onclick一開始就不要使用，因?yàn)樗蕾囉谌址秶鷥?nèi)現(xiàn)有的函數(shù)，會妨礙代碼和標(biāo)記的正確分離，還會妨礙使用 CSP（內(nèi)容安全策略）保護(hù)頁面。

如果您要像app.js這樣調(diào)整事件偵聽器......：

document.getElementById('my-div').addEventListener('click', increase)

...那么您用于刪除偵聽器的現(xiàn)有代碼就可以工作。

反對回復(fù) 2023-10-17

翻翻過去那場雪

TA貢獻(xiàn)2065條經(jīng)驗(yàn) 獲得超14個贊

要刪除內(nèi)聯(lián)事件處理程序，由于它沒有附加addEventListener，因此您無法使用刪除它removeEventListener。你可以使用removeAttribute：

div.removeAttribute('onclick');

但內(nèi)聯(lián)處理程序很糟糕，應(yīng)該盡可能避免。最好用 Javascript 附加監(jiān)聽器addEventListener：

document.querySelector('#my-div').addEventListener('click',?increase);

然后可以使用以下命令將其刪除removeEventListener：

document.querySelector('#my-div').removeEventListener('click',?increase);

看起來您只想允許一次單擊，之后應(yīng)該刪除偵聽器。如果是這種情況，那么使用起來會更容易，{ once: true }以便偵聽器在單個事件后將自行刪除：

function?increase(event){
??div.textContent?=?5?+?Number(div.textContent);
}
document.querySelector('#my-div').addEventListener('click',?increase,?{?once:?true?});

（請注意，使用textContentover更快、更安全innerHTML- 僅在分配或檢索 HTML 標(biāo)記時使用innerHTML）

反對回復(fù) 2023-10-17