如何监听特定的点击事件但抑制其他的？

Question

我的 Web 应用程序包含一个 HTML 表格，其中每一行都链接到一个特定的 URL：

<table>
  <tr data-url="https://www.google.com">
    <td>Google</td>
  </tr>
  <tr data-url="https://www.yahoo.com">
    <td>Yahoo</td>
  </tr>
</table>

这是使其工作的 Javascript：

const rows = document.querySelectorAll('table tr[data-url]');

rows.forEach(row => {
  row.addEventListener('click', function() {
    handleClick(row);
  });
});

function handleClick(row) {
  const url = row.dataset.url;
  window.document.location = url;
}

这段代码效果很好。

现在我的客户希望我向这些表格单元格添加复选框。 （我不会详细说明原因。）

如何在选中复选框时抑制重定向？

感谢您的帮助。

Answer 1

您可以检查事件的目标是否不是复选框。

rows.forEach(row => {
  row.addEventListener('click', function(e) {
    if (!e.target.matches('input[type=checkbox]')) handleClick(row);
  });
});