2017-04-26 71 views
0

有人可以幫助檢查爲什麼removeHandler不工作?以及如何使其工作? 謝謝。爲什麼removeEventListener不工作

<body> 
    <button onclick="removeHandler()" id="myBtn">remove</button> 
    <p id="demo">hello</p> 

<script> 
document.getElementById("demo").addEventListener("click", myFunction("random: ")); 

function myFunction(t) { 
    var x = function(){ 
     document.getElementById("demo").innerHTML = t+Math.random(); 
    }; 
    return x; 
} 

function removeHandler() { 
    document.getElementById("demo").removeEventListener("click", myFunction("random: ")); 
} 
</script> 

</body> 
+1

http://stackoverflow.com/questions/10444077/javascript-removeeventlistener-not-working或http://stackoverflow.com/questions/16651790/javascript-removeeventlistener-not -working-event-listener-remains或http://stackoverflow.com/questions/5825493/removeeventlistener-is-not-working – epascarello

回答

0

JavaScript在刪除事件監聽器時非常特別。您只能刪除以前添加的相同的事件偵聽器。它也需要匹配它是否冒泡。

除此之外,這意味着您無法刪除匿名事件偵聽器,因爲您無法識別它。

在你的情況,你通過實際嘗試刪除一個新創建的事件偵聽器來複合問題。

刪除事件偵聽器的唯一方法是確保它有一個名稱。對你來說,這將是如下:

var random=myFunction("random: "); 
document.getElementById("demo").addEventListener("click", random,false); 

function myFunction(t) { 
    var x = function(){ 
     document.getElementById("demo").innerHTML = t+Math.random(); 
    }; 
    return x; 
} 

function removeHandler() { 
    document.getElementById("demo").removeEventListener("click", random,false); 
} 

注:

  • 有一個變量名(random在這種情況下),以確定事件監聽器函數
  • 我還增加了false作爲確保刪除與添加相匹配的第三個參數。
+0

謝謝你。它正在工作。 –

+0

@喬莉你願意接受安瑟? – Manngo

2

Becasue myFunction爲每個呼叫返回一個新函數。每次您撥打myFunction時,它會創建(定義)一個新功能並將其返回。

function myFunction() { 
 
    return function() {}; 
 
} 
 

 
var f1 = myFunction(); 
 
var f2 = myFunction(); 
 

 
console.log(f1 === f2);

FIX:

你要的myFunction的返回值存儲到一個變量,然後將該變量傳遞給兩個addEventListenerremoveEventListener

var f = myFunction("random: "); 
document.getElementById("demo").addEventListener("click", f, false); 
// ... 
document.getElementById("demo").removeEventListener("click", f); 
+0

*「以及如何使它工作?」* – nnnnnn

+0

謝謝。那麼有沒有辦法刪除處理函數添加這種方式? –

+0

@QiaoLi然後'myFunction'必須返回相同的功能。 –

0

似乎每次你點擊演示函數調用返回新函數,以使其不像預期的那樣工作。

嘗試運行Example

<body> 


    <p id="demo">Hello</p> 
    <button onclick="removeHandler()" id="myBtn">Try it</button> 

<p><strong>Note:</strong> The addEventListener() and removeEventListener() methods are not supported in Internet Explorer 8 and earlier versions.</p> 


<script> 
document.getElementById("demo").addEventListener("click", myFunction); 

function myFunction() { 

    document.getElementById("demo").innerHTML = Math.random(); 


} 

function removeHandler() { 
    document.getElementById("demo").removeEventListener("click", myFunction); 
} 
</script>