首页 > 代码库 > js冒泡事件小解

js冒泡事件小解

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

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()也能阻止冒泡,亲测,无效。。。

js冒泡事件小解