<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>외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다 </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>