用JS阻止事件冒泡

来源：互联网发布：唱歌评分软件编辑：程序博客网时间：2024/05/16 16:07

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。

可以用JS来阻止js事件冒泡。因为浏览器的差异IE和FF的JS写法有点不一样。
IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法。
下一下完整的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">function aaaclick(){alert("td click");}function bbbclick(evt){alert("td click");if (window.event) {event.cancelBubble = true;}else if (evt){evt.stopPropagation();}}function trclick(){alert("tr click");}function tableclick(){alert("table click");}</script><style type="text/css"><!--.tab {border: 1px solid #0066FF;cellpadding:0px;cellspacing:0px;}.tab td{border: 1px solid #0066FF;}--></style></head><body><p>点击aaaa会触发上层的onclick事件，点击bbbb不会触发上层onclick事件</p><table width="204" onclick="tableclick()" class="tab">  <tr >    <td width="96"> </td>    <td width="96"> </td>  </tr>  <tr onclick="trclick()">    <td onclick="aaaclick()">aaaa</td>    <td onclick="bbbclick(event)">bbbbb</td>  </tr>  <tr>    <td> </td>    <td> </td>  </tr></table></body></html>