javascript - 为什么removeEventListener不起作用

标签 javascript

有人可以帮忙检查一下为什么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>

最佳答案

因为myFunction为每次调用返回一个新函数。每次调用 myFunction 时,它都会创建(定义)一个新函数并返回它。

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

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

console.log(f1 === f2);

修复:

您必须将 myFunction 的返回值存储到一个变量中,然后将该变量传递给 addEventListenerremoveEventListener:

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

关于javascript - 为什么removeEventListener不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43624322/

相关文章:

javascript - 我如何在 React Native 中定义一个枚举

javascript - 使用 jquery 捕获元素的名称

javascript - 下拉菜单可以编辑吗?

javascript - 我该如何使音频中的错误和正确答案完全正常?

javascript - 重新加载组件的 React.JS 问题

javascript - 组件未在当前 View 中更新

javascript - 为什么 visual studio 代码会添加破坏我的 nodejs 程序的导入语句?

javascript - Ajax - 获取单独的数据行

javascript - 什么会导致 scrollTop 出现故障?

javascript - 动态 onkeydown 不适用于父级为 contentEditable 的子级