刪除事件監聽器

我有一個畫布元素，我在其中使用WebGL繪製東西。
取決於我所添加的事件偵聽器。刪除事件監聽器

現在，當我重繪畫布時，我想刪除舊的事件偵聽器並添加一個新的偵聽器。

簡單地做，這將不起作用：

canvas.removeEventListener("click", function(event){ 
             colorbarClicked(event, viewdata); 
            }, false); 
canvas.addEventListener("click", function(event){ 
             colorbarClicked(event, viewdata); 
           }, false);

我認爲這是因爲colorbarClicked功能已經改變了（？也許是因爲它的參數有不同的值），而不是匹配的舊的，我要刪除任何更多。

所以我的問題是，每次我重繪事件偵聽器得到添加，因此加倍。但colorbarClicked函數取決於在畫布中繪製的內容，所以我肯定需要更改它。

來源

2014-10-29 phen

的可能重複的[JavaScript的：除去事件偵聽器（http://stackoverflow.com/questions/4402287/javascript-remove-event-listener） – 2014-10-29 14:41:54

你需要記住你加入時所使用的功能，並再次相同功能使用拆卸時：

// Somewhere *outside* the code doing the adding/removing (in containing code) 
var listener = null; 

// In the code adding/removing 
if (listener) { 
    canvas.removeEventListener("click", listener, false); 
} 
listener = function(event){ colorbarClicked(event, viewdata); }; 
canvas.addEventListener("click", listener, false);

邊注：添加和刪除處理每一次似乎很尷尬。通常情況下，你只需要添加一次處理程序，然後讓它響應你做出的任何更改。

來源

2014-10-29 14:42:36

由於，這工作得很好。 – phen 2014-10-29 14:59:44

您可以使用命名函數。以下面的例子：

function foo(){ 
 
    alert("this comes only once"); 
 
    this.removeEventListener('click', foo); 
 
} 
 
dude.addEventListener('click', foo);

<button id="dude">Click Me</button>

這到底是怎麼發生的是，功能foo在全球範圍內被定義。它有自己獨特的身份。該功能的基本功能是創建一個警報，然後從按鈕的click事件中移除。所以當你點擊它時，監聽器被刪除，因此你不再看到它。

您的代碼無法按預期工作，因爲您作爲回調傳遞給addEventListener的函數沒有唯一標識，並且Javascript不知道要刪除的內容。

這種方法還可以防止之類的東西回調地獄:)

來源

2014-10-29 14:42:49

刪除事件監聽器

回答

相關問題