解决：事件监听器 addEventListener 被多次调用

诚诚程程成

于 2024-07-21 22:54:21 发布

阅读量380

点赞数 2

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/weixin_52268321/article/details/140595660

版权

背景：

给一个元素添加了事件监听，click 会触发
然而在实际场景中，点击一次，事件会被触发两次
阻止冒泡也没有用

解决：

使用API：event.stopImmediatePropagation()
stopImmediatePropagation() 方法可防止调用同一事件的其他侦听器。
API 举例说明：
单击按钮时，执行第一个事件处理程序，并停止执行其余的事件处理程序：

var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction(event) {
  alert ("Hello World!");
  event.stopImmediatePropagation();
} 

// 这个函数不会被执行
function someOtherFunction() {
  alert ("I will not get to say Hello World"); 
}