JS事件冒泡

最新推荐文章于 2025-09-26 23:30:00 发布

原创最新推荐文章于 2025-09-26 23:30:00 发布 · 188 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JS事件冒泡 #JS事件叠加

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

博客讲述项目中遇到的问题，当父元素与子元素都定义click事件，点击子元素会触发父元素事件。介绍了JS事件冒泡概念，即元素触发事件会传递给父元素。给出解决方法，点击子元素时阻止事件冒泡，从而避免触发父元素事件。

1、问题描述

今天在项目中遇到个问题，当父元素与子元素都定义了一个click事件时，点击子元素的同时也触发了父元素的事件。

代码大概如下：

 <div id="div1">
    <div id="div2"></div>
 </div>

$('#div1').on('click', function(){
    alert(1);
});
$('#div2').on('click', function(){
    alert(2);
});

当点击div2时，执行结果：先弹出2，再弹出1。

2、涉及JS知识点

JS事件冒泡：当一个元素触发事件时，这个元素会把事件传递给它的父元素，一直传递到window级，父元素接收到事件后也会触发自己绑定的这个事件函数（注意：子元素只会传递事件，不会传递定义事件的函数，如果父元素没有对事件绑定函数，也就没有什么表现，但是事件确实是传递过去了）

3、解决方法

当点击div2时阻止事件冒泡，修改后代码：

$('#div1').on('click', function(){
    alert(1);
});
$('#div2').on('click', function(e){
    stopBubble(e);
    alert(2);
});

/*阻止事件冒泡*/
function stopBubble(e) {
   //如果提供了事件对象，则这是一个非IE浏览器
   if ( e && e.stopPropagation )
       //因此它支持W3C的stopPropagation()方法
      e.stopPropagation();
   else
       //否则，我们需要使用IE的方式来取消事件冒泡
       window.event.cancelBubble = true;
}

修改后执行结果：当点击div2时，先alert(2)，由于阻止了事件传递给div1，所以div1没有执行它的click事件，问题解决。

本文参考了https://www.cnblogs.com/moqing/p/5590216.html，感谢“全凭一口仙气儿活着”，把js的事件冒泡解释得非常详细