刪除JavaScript事件：爲什麼此示例不起作用？

我與刪除先前已添加到DOM元素機智element.addEventListener JavaScript事件掙扎：刪除JavaScript事件：爲什麼此示例不起作用？

$(() => { 
    var example = { 
    init() { 
     this.element = document.getElementById('foo'); 
     this.element.addEventListener('mousedown', this.start.bind(this)); 
    }, 
    start() { 
     console.log('start'); 
     this.element.addEventListener('mouseup', this.stop.bind(this)); 
    }, 
    stop() { 
     console.log('stop'); 
     this.element.removeEventListener('mouseup', this.stop); 
    } 
    }; 

    var bar = Object.create(example); 
    bar.init(); 
});

Fiddle

當點擊元素並保持mousebutton，「開始」被記錄。只要釋放鼠標按鈕，就會記錄「停止」。第一次按預期工作，但第二次「停止」會記錄兩次，然後三次，然後四次......這意味着在stop()中，事件沒有被正確刪除。

我知道我必須傳遞完全相同的實例給removeEventListener我傳遞給addEventListener，但對我來說這在這種情況下似乎是正確的，所以我有點失落，爲什麼這不能正常工作。

來源

2016-07-02 Sven

它不起作用，因爲bind返回一個新的函數，它與原始函數不同。您將添加一個作爲處理程序，但嘗試刪除另一個。

您需要在某處存儲bind的返回值，並將其用於添加和刪除事件處理程序。

來源

2016-07-02 06:51:27

啊，這很有道理，謝謝！我不知道'bind'會返回一個新的函數，雖然看起來非常合乎邏輯，但我從來沒有想過。 – Sven

即使您使用相同的參數調用它，甚至可以保證'bind'每次都會返回一個新函數。 – Kaiido

刪除JavaScript事件：爲什麼此示例不起作用？

回答

相關問題