event.cancelBubble的理解

关于event.cancelBubble由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件。

取消事件冒泡: 在 IE 的事件机制中,触发事件会从子元素向父元素逐级上传,就是说,如果子元素触发了单击事件,那么也会触发父元素的单击事件;event.cancelBubble=true;可以停止事件继续上传. 补充一点,Ie的事件传递是从下到上的: 事件来源对象->上级对象->上上级对象->.....->body->document->window .

ie下用cancelBubble ff下用stopPropagation阻止事件传递

例子


<SCRIPT>     
function show(evt){  
    if(window.event) event.cancelBubble = true;  
    else evt.stopPropagation();  
    document.getElementById("pad").style.display = "block";  
    return false;  
}  
function doClose(){  
    document.getElementById("pad").style.display = "none";  
}  
</SCRIPT>  
<body onclick="doClose();">  
<input type="text" name="txtA" value="click" onclick="show(event);">  
<div id="pad" style="display:none;position:absolute;left:300px;top:300px;width:300px;height:300px;background:red;">xxxx</div>  
</body>

你可能感兴趣的:(event.cancelBubble的理解)