说起来有点乱的,你看看下面这个例子吧,这个例子其实也是51js的万常华写的,很能说明bubble事件的<SCRIPT LANGUAGE="JScript">
function checkCancel()
{
if (window.event.shiftKey)
window.event.cancelBubble = true;
}
function showSrc()
{
if (window.event.srcElement.tagName == "IMG")
alert(window.event.srcElement.src);
}
</SCRIPT><BODY onclick="showSrc()">
cancelBubble 示例:<br>
点击图片显示路径,按Shift点击不显示:<br>
<IMG onclick="checkCancel()" SRC="http://images.csdn.net/upimgs/20060124_760_90.jpg">
function checkCancel()
{
if (window.event.shiftKey)
window.event.cancelBubble = true;
}
function showSrc()
{
if (window.event.srcElement.tagName == "IMG")
alert(window.event.srcElement.src);
}
</SCRIPT><BODY onclick="showSrc()">
cancelBubble 示例:<br>
点击图片显示路径,按Shift点击不显示:<br>
<IMG onclick="checkCancel()" SRC="http://images.csdn.net/upimgs/20060124_760_90.jpg">
<SCRIPT LANGUAGE="JavaScript">
<!--
function alert1(s)
{
window.event.cancelBubble=true;
alert(s)
}
//-->
</SCRIPT>
<TABLE width="100%" height="97" border="1" cellpadding="0" cellspacing="0">
<TR onclick="alert1('tr')">
<TD onclick="alert1('td')"> </TD>
<TD onclick="alert1('td')"> </TD>
</TR>
</TABLE>
<body onclick="alert(2)">
<span onclick="alert(1)">aaa</span>
</body>如上点击aaa文字会触发onclick事件,由于span在body中,所以点击aaa时也会触发body的onclick事件,如果我让event.cacelBubble=true,那么span的onclick事件就不会传递到body上,阻止两次弹出对话框