Wie kann man auf bestimmte Klickereignisse achten, andere jedoch unterdrücken?

Question

Meine Webanwendung enthält eine HTML-Tabelle, in der jede Zeile auf eine bestimmte URL verweist:

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

Das ist das Javascript, mit dem es funktioniert:

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

Dieser Code funktioniert großartig.

Jetzt möchte mein Kunde, dass ich Kontrollkästchen zu diesen Tabellenzellen hinzufüge. (Ich werde nicht näher darauf eingehen, warum.)

Wie unterdrücke ich die Weiterleitung, wenn das Kontrollkästchen aktiviert ist?

Danke für deine Hilfe.

Answer 1

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

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