zoukankan      html  css  js  c++  java
  • 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>
    只要肯努力学习工作,面包会有的,牛奶也会有的
  • 相关阅读:
    Linux Shell脚本编程--Head/Tail命令详解
    Python学习笔记-抽象
    L2-020 功夫传人
    pat 抢红包
    pat 集合相似度
    pat 喊山
    hdu1029
    win10 , JAVA安装 环境搭建
    ZOJ2540 Form a Square
    ZOJ3180 Number Game
  • 原文地址:https://www.cnblogs.com/sandraMaying/p/topPropagation.html
Copyright © 2011-2022 走看看