JS事件冒泡

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

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

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的事件冒泡解释得非常详细

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值