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

 

<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>

 

 

posted @ 2013-10-10 20:25  Sandra-web前端  阅读(545)  评论(0)  编辑  收藏  举报