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

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 selector = '.tr-class input[type="checkbox"]';

Можно добавить нежелательным элементам обработчик, где будет останавливаться всплытие события:

document.querySelectorAll(selector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.stopPropagation());

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

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

function onClick(e) {
  if (e.target.matches(selector)) {
    return;
  }

  // ...
}

Comments

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

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