由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD,Bubble就是一个事件可以从子节点向
父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截
获这个点击事件，但是如果你设置此td的event.cancelBubble=true，则就不能上传事件，即tr和table的点击事件不响应td
的点击事件。比如下面的例子：οnclick="tableA_rowA_click事件会同时引起tableA的onclick事件，而tableA_rowB_click
阻止了事件冒泡则不会引起tableA的事件。这不是一个标准性的属性，FF不支持，IE支持，其它浏览器未测。
<html>
<body>
<table border="1" width="26%" id="tableA" οnclick="alert('点击了tableA')">
<tr οnclick="tableA_rowA_click()">
<td width="106">一般</td>
</tr>
<tr οnclick="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;
}
1188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
