Bagaimana untuk mendengar acara klik tertentu tetapi menyekat yang lain?

Question

Aplikasi web saya mengandungi jadual HTML di mana setiap baris memaut ke URL tertentu:

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

Inilah Javascript yang menjadikannya berfungsi:

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

Kod ini berfungsi dengan baik.

Kini pelanggan saya mahu saya menambah kotak pilihan pada sel jadual ini. (Saya tidak akan menjelaskan secara terperinci mengapa.)

Bagaimana untuk menyekat ubah hala apabila kotak pilihan dipilih?

Terima kasih atas bantuan anda.

Answer 1

Anda boleh menyemak sama ada sasaran acara itu bukan kotak pilihan.

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