首页 > 代码库 > 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冒泡事件小解