爲什麼removeEventListener不工作

有人可以幫助檢查爲什麼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>

來源

2017-04-26 Qiao Li

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

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作爲確保刪除與添加相匹配的第三個參數。

來源

2017-04-26 03:19:42 Manngo

謝謝你。它正在工作。 –

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

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

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

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

 
console.log(f1 === f2);

FIX：

你要的myFunction的返回值存儲到一個變量，然後將該變量傳遞給兩個addEventListener和removeEventListener：

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

來源

2017-04-26 03:12:33

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

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

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

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

嘗試運行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>

來源

2017-04-26 03:44:52

爲什麼removeEventListener不工作

回答

相關問題