event.stopPropagation 阻止触发父元素的绑定事件

最新推荐文章于 2021-04-23 08:56:23 发布

weixin_33958366

最新推荐文章于 2021-04-23 08:56:23 发布

阅读量203

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sandraMaying/p/topPropagation.html

版权

<html>
<head>
  <title>event.stopPropagation</title>
</head>
<body>
<div id="outer">
   <div id="inner"></div>
</div>
</body>
</html>

<script type="text/javascript">
  $(function(){
      $("#outer").click(function(){
            alert(2);
       });
      $("#inner").click(function(){
            alert(3);
       });
   });

</script>

针对上面的这些html 代码和js ,会造成一个情况就是触发 inner的click事件时会触发他的父元素的click事件，为了在触发inner的click事件的时候，不触发父元素，

就需要运用到jquery 中的 event.stopPropagation，该方法就是在点击子元素时，阻止触发父元素的方法，具体可查看http://api.jquery.com/event.stopPropagation/

针对这个现象，我写了下面的这个Js

<script type="text/javascript">
  $(function(){
     $("#outer").click(function(){
            
              alert(2);
       });
      $("#outer").mousedown(function(event){
             event.stopPropagation();

        });
       $("#inner").click(function(){
           event.stopPropagation;
          alert(3);
        });
   });
</script>