JavaScript onclick() 事件冒泡 - 工作与否？答案

【问题标题】：JavaScript onclick() event bubbling - working or not?JavaScript onclick() 事件冒泡 - 工作与否？
【发布时间】：2012-11-27 22:57:19
【问题描述】：

我有一个表格，其中表格行标记用onclick() 处理程序装饰。如果在任何地方单击该行，它将加载另一个页面。在该行的一个元素中，是一个锚标记，它也指向另一个页面。

期望的行为是，如果他们点击链接，“delete.html”就会被加载。如果他们单击行中的任何其他位置，则会加载“edit.html”。

问题是有时（根据用户）链接和onclick() 会同时触发，导致后端代码出现问题。他们发誓他们没有双击。

我对 JavaScript 事件冒泡、处理以及其他任何事情都不太了解，甚至不知道从哪里开始解决这个奇怪的问题，所以我正在寻求帮助。这是呈现页面的片段，显示了带有嵌入链接和关联脚本标记的行。欢迎提出任何建议：

<tr id="tableRow_3339_0" class="odd">
   <td class="l"></td>
   <td>PENDING</td>
   <td>Yabba Dabba Doo</td>
   <td>Fred Flintstone</td>
   <td>
     <a href="/delete.html?requestId=3339">
       <div class="deleteButtonIcon"></div>
     </a>
  </td>
  <td class="r"></td>
</tr>
<script type="text/javascript">document.getElementById("tableRow_3339_0").onclick = function(event) { window.location = '//edit.html?requestId=3339'; };</script>

【问题讨论】：

标签： javascript dom-events event-bubbling

【解决方案1】：

事件冒泡是这样工作的。如果元素 A 包含在元素 B 中，并且单击了元素 A，则会为元素 A 触发 click 事件，然后它会冒泡并为元素 B 触发。发生这种情况是因为从技术上讲，您同时点击了这两个元素。

所以基本上如果他们点击链接，点击事件就会冒泡到tr 元素。根据链接点击加载下一页的速度，可能会发生 tr 点击事件。

您可以在事件处理程序中停止冒泡：How to stop event propagation with inline onclick attribute?

【讨论】：