关于event.cancelBubble的描述
关于event.cancelBubble的描述
由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD.
★点击设计★ http://www.djasp.Net 全力打造WEB技术站点，欢迎大家访问！
Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。
本文由 点击设计 http://www.djasp.Net 收集整理。谢绝无聊之人转载！
举个简单的例子：
此内容来源于 ★点击设计★ http://www.djasp.Net 网页编程资讯官方网站！
比如你没有用CSS，但是想同意改变你的页面上的所有按钮的属性，你可以在页面load完毕后使用在body中使用onmouseover方法统一改变鼠标在按钮上和离开后的style，而不用对每个按钮都写一边。
请勿盗版 ★点击设计★ http://www.djasp.Net 网站上的内容，谢谢合作！
程序如下：
请勿盗版 ★点击设计★ http://www.djasp.Net 网站上的内容，谢谢合作！
<body onmouseover=mouse_over() onmouseout=mouse_out()>
更加精准的描述
a lot of events are passed upward through the DOM object structure, but you can use event.cancelBubble=true to stop this "bubbling". For example, if you click on the following button, the alert message boxes in both the button’s onclick event handler and the document’s onclick event handler will be displayed. But if you uncomment the cancelBubble line, you will only see the alert box in the button’s event handler get displayed:
<script language="javascript">
function document.onclick()
{
alert("in the document’s event handler!");
}
function clickMe()
{
alert("in the button’s event handler!");
//event.cancelBubble = true;
}
</script>
<input type="button" value="click me" onclick="clickMe()">
< span>
