LUCKY

Welcome to Us !

js阻止子元素触发父元素的事件的方法

lucky Javascript 2018/05/11

js中有两个div,关系为父子层。


例如:


<div class="iparent">
   <div class="ichild">我想点击我,不触发上面那家伙0.0</div>
</div>

再例如存在两个点击事件:


<script>
   $(".iparent").click(function(){
      alert("我是父亲");
   });
   //子层也存在点击事件  
   $(".ichild").click(function(){
      alert("我就是我,是颜色不一样的烟火");
   }); 
</script>

这样经过测试就知道,当点击子层时,会触发父层的点击事件。


那么,怎么解决点击子层不触发父层呢?


我们可以在子层点击事件上增加


e.stopPropagation();


在子节点触发事件里加上阻止冒泡(有兴趣可以研究下)

代码如下  


//子层也存在点击事件  
   $(".ichild").click(function(e){
      alert("我就是我,是颜色不一样的烟火");
      e.stopPropagation();
   }); 

这样当点击子元素时,不会触发父元素的点击事件了。