如何監聽特定的點擊事件但抑制其他的？

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);
  });
});