Comment écouter des événements de clic spécifiques mais en supprimer d'autres ?

Question

Mon application Web contient un tableau HTML où chaque ligne renvoie à une URL spécifique :

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

Voici le Javascript qui le fait fonctionner :

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

Ce code fonctionne très bien.

Maintenant, mon client veut que j'ajoute des cases à cocher à ces cellules de tableau. (Je n'entrerai pas dans les détails sur pourquoi.)

Comment supprimer la redirection lorsque la case est cochée ?

Merci pour votre aide.

Answer 1

Vous pouvez vérifier si la cible de l'événement n'est pas une case à cocher.

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