js冒泡事件小解

Posted 2020-08-15 炎泽

何为冒泡事件？简单来说事件就像一个水里的泡泡，先触发当前对象再触发其父元素，然后是父元素的父元素...

eg:

<div class="out" onclick= "alert(‘out‘)">
       <div class="middle" onclick= "alert(‘middle‘)">
            <input class="inner" type="button" onclick= "alert(‘inner‘)"/>
       </div>
</div>

点击button，依次弹出inner, middle, out。

终止于哪个元素？

从当前元素逐步往上，有的浏览器终止于document，有的是window。

 

如何阻止冒泡事件？

<div class="out" onclick= "alert(‘out‘)">
       <div class="middle" onclick= "alert(‘middle‘)">
            <input class="inner" type="button" onclick= "alert(‘inner‘)"/>
       </div>
</div>

<script>

       function a(event){
             alert("inner");

　　　　  //兼容IE
             event.stopPropagation? event.stopPropagation():(event.cancelBubble= true);
       }

</script>

这样就只弹出inner

注: 网上有人说return false;和event.preventDefault()也能阻止冒泡，亲测，无效。。。