zoukankan      html  css  js  c++  java
  • 冒泡

    #box1{
        width: 200px;height: 200px;border: 1px solid #333;
    }
    #box2{
        width: 100px;height: 100px;margin: 50px;border: 1px solid #333;
    }
    #span{
         width: 50px;height: 50px;border: 1px solid #333;margin: 25px;display: block;
    }
    <div id="box1" class="box1">
         <div id="box2" class="box2">
              <span id="span">点击</span>
         </div>
    </div>
    $("#span").click(function(){
         alert("我是span")
         if(event.stopPropagation){
              event.stopPropagation();
         }else{
              event.cancelBubble = true;
         }
     })
     $("#box2").click(function(){
          alert("我是box2")
          if(event.stopPropagation){
               event.stopPropagation();
          }else{
               event.cancelBubble = true;
          }
     })
     $("#box1").click(function(){
          alert("我是box1")
          if(event.stopPropagation){
               event.stopPropagation();
          }else{
               event.cancelBubble = true;
           }
    })

    冒泡解决

     <script>
            $("#span").click(function(){
                alert("我是span")
                if(event.stopPropagation){
                    event.stopPropagation();
                }else{
                    event.cancelBubble = true;
                }
            })
            $("#box2").click(function(){
                
                alert("我是box2")
    
                if(event.stopPropagation){
                    event.stopPropagation();
                }else{
                    event.cancelBubble = true;
                }
            })
            $("#box1").click(function(){
                alert("我是box1")
                
                if(event.stopPropagation){
                    event.stopPropagation();
                }else{
                    event.cancelBubble = true;
                }
            })
        </script>
        
       
    </body>
    </html>
  • 相关阅读:
    第三周学习笔记
    质量属性
    第四周学习
    逻辑回归
    架构的概念
    第二周总结
    线性回归
    十步走-阅读笔记六
    十步走-阅读笔记五
    P2633 Count on a tree
  • 原文地址:https://www.cnblogs.com/namehou/p/10150287.html
Copyright © 2011-2022 走看看