看下面HTML代码:
<div οnclick="parentClicked()">
点击我(父元素)
<div οnclick="childClicked()">
点击我(子元素)
</div>
</div>
<script>
function childClicked(event) {
alert('child clicked');
}
function parentClicked(event) {
alert('parent clicked');
}
</script>
上述代码运行后,点击"点击我(子元素)"文本,会发现不仅会弹出parent clicked提示,还会弹出child clicked提示,这就是js操作HTML Dom元素时的冒泡问题。关于冒泡问题,可以百度看看相关文章,比如http://www.jb51.net/article/42492.htm。
在这里,我们如果要阻止冒泡事件,往往会使用event.stopPropagation()方法阻止事件冒泡到父级元素。但这个方法在IE8中并不能使用。在IE8中,需要使用来阻止冒泡,所以有如下包裹函数:
function stopBubble(e) { // 如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) { // 因此它支持W3C的stopPropagation()方法 e.stopPropagation(); } else { // 否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancelBubble = true; } }
这里顺便说一下,阻止默认事件也是有这个问题,下面的代码就就实现了点击A标签并不会跳转:
<a href="www.baidu.com" οnclick="clicked()">点击我并不会跳转</a>
<script>
function stopDefault( e ) {
// 阻止默认浏览器动作(W3C)
if ( e && e.preventDefault ) {
e.preventDefault();
} else {
// IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}
function clicked(event) {
stopDefault(event);
alert("我阻止了点击A标签的默认事件");
}
</script>