解决:点击子元素(子元素自己也绑定了事件)不触发父元素绑定的事件
解决:点击子元素(子元素自己也绑定了事件)不触发父元素绑定的事件
issac宝华 发表于2年前
解决:点击子元素(子元素自己也绑定了事件)不触发父元素绑定的事件
  • 发表于 2年前
  • 阅读 372
  • 收藏 3
  • 点赞 0
  • 评论 1

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

摘要: jQuery事件,阻止事件冒泡

问题代码:

 <div class="elementI" style="height: 100px;width: 100px;border: 1px solid red;">

    父元素

    <div class="elementII" style="height: 50px;width: 50px;border: 1px solid black;">子元素</div>

</div>

<script type="text/javaScript">

    /*子元素绑定的事件*/

    $(".elementI").click(function(){

        alert("elementI");

    });

    /*父元素绑定的事件*/

    $(".elementII").click(function(){

        alert("elementII");
    });


</script> 

如上代码:点击子元素区域,会输出"elementI"和 "elementII" ,点击非子元素的父元素区域:输出“ elementII”

需要实现的效果是:

1)点击子元素区域:只会输出 “ elementI ”;

2)点击非子元素的父元素区域输出:“elementII”

实现的方法:

在子元素绑定的事件中阻止父元素事件的冒泡。这个方法是需要使用jQuery的事件,使用“事件”首先是要在参数列表中添加“形参”,比如:

要使用的方法是:

代码:

以下代码代替子元素的事件:

/*子元素绑定的事件*/

$(".elementI").click(function(event){
 
   alert("elementI");
   event.stopPropagation()

});

 

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 9
博文 121
码字总数 34397
评论 (1)
喜欢蚯蚓的猫
例子中的父子搞错了吧!
×
issac宝华
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: