<div class="htmlarea"> <textarea id="runcode83456"> <title>JS でのイベントのバブリング</title> <div style="background-color:Azure;"> </div>目的 BBB をクリックすると TR が表示され、AAA をクリックすると TD が表示されます<table> <tr onclick="ClickTr();"> <td onclick="ClickTd();">AAA</td> <td>BBB</td> </tr> </table> </textarea> <br><input onclick="runEx('runcode83456')" type="button" value="运行代码"><input onclick="doCopy('runcode83456')" type="button" value="复制代码"> <input onclick="doSave(runcode83456)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank">[Ctrl A すべて選択 注: </a>外部 Js を導入する必要がある場合は、</div> を実行するために更新する必要があります]<script type="text/javascript"><!-- function ClickTr() { alert("TR"); } function ClickTd() { alert("TD"); //如果不加下面的代码点击先会弹出TD然后弹出TR,原因是HTML是对象结构当点击AAA的时候(执行),会冒泡到TR-->table-->body->document->window,当用event.cancelBubble=true的时候就说明阻止该冒泡行为 event.cancelBubble=true; } // --></script>