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

Question

我有一个表，其中表行标记装饰有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>

Answer 1

事件冒泡是这样的。 如果元素A包含在元素B中，并且单击了元素A，则对元素A触发click事件，然后将其冒泡并为元素B触发。这是因为从技术上讲，您同时单击两个元素。

因此，基本上，如果他们单击链接，单击事件就会冒泡到tr元素。 取决于您的下一页从链接单击加载的速度，可能会发生tr click事件。

您可以在事件处理程序中停止冒泡： 如何使用内联onclick属性停止事件传播？

Answer 2

处理JavaScript事件的主要方式有3种：

1. 事件处理程序
2. 事件监听器
3. 活动委托

事件处理程序是诸如onclick类的东西，它们直接放入HTML中。 事件侦听器使用称为addEventListener的方法将列表器附加到元素，并使浏览器侦听事件。 根据您的问题进行事件委派（涉及冒泡），并允许我们侦听其父级元素上发生在其子级上的事件。

您基本上是在尝试将＃1和＃3融合在一起。 您可以使用这三个中的任何一个，但实际上使用＃2可能会更轻松：

尝试这样的事情：

rows = document.getElementsByTagName("tr");
rows.('click', function(event) {
 window.location = '//edit.html?requestId=3339'; 
};

如果您需要更好地了解这三种方式，则有关JavaScript事件的这篇文章将涵盖更多内容。 （免责声明：我写的）。