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

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 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()

});

 

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