Как не обрабатывать клик по некоторым из вложенных элементов?

Question

[Антон Рейтаровский]

Есть такой элемент:

<tr class='tr-class'>
    <td>
        <input type="checkbox">
    </td>
    <td>...</td>
    <td>...</td>
    <td>...</td>
</tr>

На tr.tr-class повешен обработчик клика, который выполняет некие действия, как можно сделать, чтобы клик работал по всей tr кроме чекбокса?

Answer 1

[0xD34F]

Элементам, с которых не хотите получать события, добавьте обработчик, в котором выполняйте остановку всплытия:

const stop = e => e.stopPropagation();
document.querySelectorAll('.tr-class input[type="checkbox"]').forEach(n => {
  n.addEventListener('click', stop);
});

Или проверяйте, откуда событие пришло, если источник неподходящий - ничего не делайте:

for (const n of document.querySelectorAll('.tr-class')) {
  n.addEventListener('click', onClick);
}

function onClick(e) {
  if (e.target.matches('input[type="checkbox"]')) {
  // или
  // if (e.target.tagName === 'INPUT' && e.target.type === 'checkbox') {
    return;
  }

  // ...
}

Comments

[Антон Рейтаровский]

Спасибо, то что нужно