如何监听表格行点击事件并抑制复选框触发的页面跳转？

首先修改HTML，为每行添加包含复选框的单元格：

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

接下来提供两种可行的解决方案：

方案一：阻止复选框的事件冒泡 #

给每个复选框添加点击事件，阻止事件向上冒泡到行元素，这样行的点击事件就不会被触发：

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

// 原有行点击跳转逻辑
rows.forEach(row => {
  row.addEventListener('click', function() {
    handleClick(row);
  });
});

// 阻止复选框点击事件冒泡
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('click', function(e) {
    e.stopPropagation();
  });
});

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

方案二：在行点击事件中判断点击目标 #

在触发行的点击事件时，检查点击的目标是否是复选框或者属于复选框的元素，如果是则不执行跳转逻辑：

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

rows.forEach(row => {
  row.addEventListener('click', function(e) {
    // 判断点击目标是否为复选框，或者是否在复选框内部
    if (e.target.classList.contains('row-checkbox') || e.target.closest('.row-checkbox')) {
      return;
    }
    handleClick(row);
  });
});

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

两种方案都能实现点击复选框时不触发页面跳转的需求，方案二更简洁，不需要额外绑定复选框的事件。

内容的提问来源于stack exchange，提问作者Tintin81