看下面HTML代码:
<div onclick="parentClicked()"> 点击我(父元素) <div onclick="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" onclick="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>