有人可以帮助检查removeHandler无法正常工作的原因吗?以及如何使它工作? 感谢。
<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>
答案 0 :(得分:2)
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);
答案 1 :(得分: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
作为第三个参数,以确保删除与添加匹配。答案 2 :(得分:0)
似乎每次单击demo函数调用都会返回新函数,以使其不按预期运行。
尝试运行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>