冒泡事件的解除办法

最新推荐文章于 2025-05-28 08:33:01 发布

托尼韦恩

最新推荐文章于 2025-05-28 08:33:01 发布

阅读量1.4k

点赞数 3

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_36657997/article/details/80917812

本文探讨了在JavaScript中点击按钮触发多次click事件的问题。通过分析事件冒泡机制，介绍了如何阻止事件冒泡以避免重复触发事件的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天遇到一个问题，单击一个按钮时，触发了两次click事件。经过询问我的boss曹叔后得知，我遇到了冒泡事件。

冒泡事件我的简单理解是当你触发一个click事件时，如果该子节点和父节点都绑定了click事件，事件会向上传递，从子节点传递到父节点。子节点处理一次，父节点再处理一次，依次向上。

我的按钮是button里面添加一个子节点i

代码如下：

var button = document.createElement("BUTTON");
parent.appendChild(button);
button.id = id;
button.className = "btn btn-default";
button.title = title;
button.addEventListener("click", this, false);
button.name = name;
var rmspan = document.createElement("i");
button.appendChild(rmspan);
rmspan.className = classname;
rmspan.name = name;
rmspan.setAttribute("aria-hidden", "true");
rmspan.setAttribute("data-toggle", "modal");
rmspan.setAttribute("data-target", "myModal");
rmspan.addEventListener("click", this, false);
rmspan.title = title;

所以当我点击按钮时，会多次触发click事件。

解决办法：

此时e.preventDefault();已经无法解决问题

采用另外一种方法

封装方法如下：

Utils.stopBubble = function(e) {
if (e && e.stopPropagation)
e.stopPropagation();
else
window.event.cancelBubble = true;
};

使用时：Utils.stopBubble(evt);

如此即可解除冒泡事件