说起来有点乱的,你看看下面这个例子吧,这个例子其实也是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">

解决方案 »

  1.   

    还有个例子,你可以把window.event.cancelBubble=true注释掉看看效果
    <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')">&nbsp;</TD>
    <TD onclick="alert1('td')">&nbsp;</TD>
    </TR>
    </TABLE>
      

  2.   

    DOM对象是像树状结构的,子对象的事件也会触发父对象的事件,
    <body onclick="alert(2)">
    <span onclick="alert(1)">aaa</span>
    </body>如上点击aaa文字会触发onclick事件,由于span在body中,所以点击aaa时也会触发body的onclick事件,如果我让event.cacelBubble=true,那么span的onclick事件就不会传递到body上,阻止两次弹出对话框