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，然后它将冒泡并触发元素B.这是因为从技术上讲，您单击这两个元素。

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

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

Answer 2

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

事件处理程序
活动听众
活动代表团

事件处理程序与onclick之类的东西直接放在HTML中。事件侦听器使用名为addEventListener的方法将列表器附加到元素，并让浏览器侦听事件。根据您的问题，事件授权（涉及冒泡），并允许我们听取父元素发生在他们孩子身上的事件。

你基本上试图在这里混合＃1和＃3。您可以使用这三种中的任何一种，但实际上您可以更轻松地使用＃2：

尝试这样的事情：

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

如果您需要更好地了解这3种方法，JavaScript Events上的这篇文章将更多地介绍这一点。（免责声明：我写过）。

Javascript onclick（）事件冒泡 - 工作与否？

2 个答案: