event.cancelBubble与event.stopPropagation()

由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD,Bubble就是一个事件可以从子节点向

父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制使你可以从TR或者Table处截

获这个点击事件,但是如果你设置此td的event.cancelBubble=true,则就不能上传事件,即tr和table的点击事件不响应td

的点击事件。比如下面的例子:onclick="tableA_rowA_click事件会同时引起tableA的onclick事件,而tableA_rowB_click

阻止了事件冒泡则不会引起tableA的事件。这不是一个标准性的属性,FF不支持,IE支持,其它浏览器未测。
<html> 
    <body> 
    <table border="1" width="26%" id="tableA" onclick="alert('点击了tableA')"> 
        <tr onclick="tableA_rowA_click()"> 
            <td width="106">一般</td> 
        </tr> 
        <tr onclick="tableA_rowB_click(event)"> 
            <td width="106">阻止消息上传</td> 
        </tr> 
    </table> 
    </body> 
</html> 


<script language="javascript"> 
    function tableA_rowA_click(){   
        alert('点击了tableA的rowA');   
    }   

    function tableA_rowB_click(event){   
        alert('点击了tableA的rowB');   
        event.cancelBubble=true;   
    }   
</script>
在IE的事件机制中,触发事件会从子元素向父元素逐级上传,就是说,如果子元素触发了单击事件,那么也会触发父元素的

单击事件;event.cancelBubble=true;可以停止事件继续上传。FF中事件也是从子元素向父元素逐级上传,但FF不支持

event.cancelBubble,FF支持stopPropagation()方法。将上面的方法改为:
function tableA_rowB_click(event){   
        alert('点击了tableA的rowB');   
event.stopPropagation();
    } 
则和IE中的效果是一样的。可以这样写一个方法兼容:
function stopBubble(event) {
//如果提供了事件对象,则这是一个非IE浏览器
if (event.stopPropagation)
//因此它支持W3C的 stopPropagation()方法
event.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
event.cancelBubble = true;
}

你可能感兴趣的:(JavaScript,html,function,浏览器,IE,table)