4

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

2 回答 2

6

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

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

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

于 2012-11-27T23:06:06.500 回答
0

处理 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'; 
};

如果您需要更好地理解这 3 种方式，这篇关于JavaScript 事件的文章将对此进行更多介绍。（免责声明：我写的）。

于 2016-03-24T18:35:19.110 回答