Question

我需要一种方法来删除javascript中附加了onclick="func()"的事件侦听器

下面是示例代码

＆＃13;

<!DOCTYPE html>
<html>
  <body>
  <script>
  function f1(){
      alert("f1");
  }
  function f2(){
      alert("f2");
      document.getElementById("b1").removeEventListener("click",f1);
  }
  </script>
  <button id="b1" type="button" onclick="f1()">B1</button>
  <button id="b2" type="button" onclick="f2()">B2</button>
 
  </body>
</html>

＆＃13;

Answer 1

将另一个空白侦听器添加为

document.getElementById("b1").onclick = function() {
     return false;
   }

Answer 2

您只需将元素的onclick属性设置为null。

<!DOCTYPE html>
<html>

<body>
  <script>
    function f1() {
      alert("f1");
    }

    function f2() {
      alert("f2");
      document.getElementById("b1").onclick = null
    }
  </script>
  <button id="b1" type="button" onclick="f1()">B1</button>
  <button id="b2" type="button" onclick="f2()">B2</button>

</body>

</html>

这是因为当您执行onclick="f1()"时，浏览器会为您创建一个新功能，有些（但不完全）等同于此：

elem.onclick = new Function("event", "f1()")

这给你一个功能，如下所示：

elem.onclick = function(event) {
  f1()
}

因此，将该属性设置为null只会覆盖指定的函数，并将其设置回默认值。

Answer 3

你可以改变它：

document.getElementById("b1").removeEventListener("click",f1);

为它：

document.getElementById("b1").onclick = null;

<!DOCTYPE html>
<html>
  <body>
  <script>
  function f1(){
      alert("f1");
  }
  function f2(){
      alert("f2");
      document.getElementById("b1").onclick = null;
  }
  </script>
  <button id="b1" type="button" onclick="f1()">B1</button>
  <button id="b2" type="button" onclick="f2()">B2</button>
 
  </body>
</html>

Answer 4

将onclick设置为null可以正常工作，但您可能会注意到，如果您检查DOM，则onclick仍然存在。

另一种方法是使用removeAttribute

例如

<!DOCTYPE html>
<html>
  <body>
  <script>
  function f1(){
    alert("f1");
  }
  function f2(){
    alert("f2");
    document.getElementById("b1").
      removeAttribute("onclick");
  }
  </script>
  <button id="b1" type="button" onclick="f1()">B1</button>
  <button id="b2" type="button" onclick="f2()">B2</button>
 
  </body>
</html>

如何删除onclick附加的事件侦听器

4 个答案: