冒泡

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