javascript - щелчок мышью по родительскому элементу, но предотвращение запуска его дочернего элемента

Question

Как определить для дочернего элемента, чтобы не вызывать событие, как на .mouseclick = 'no-event' или: .mousedown = 'no-event' с естественной командой Javascript?

Итак, его родитель получит первое событие до всплытия, событие родительского элемента получит e. target = e.currentTarget

Мне нужно сделать это на некоторых конкретных дочерних элементах, а некоторые нет.

На родительском элементе 'capture' не дает правильного поведения как упомянуто выше.

Все остальные решения, которыми я следую в Интернете, дают множество «хитрых» решений. это не работает правильно.

Answer 1

Вы можете дать детям собственный класс, который определяет, должен ли он быть активным или нет.Внутри функции обратного вызова для родительского контейнера проверьте, какой класс использует цель, и действуйте соответственно.

Вот пример:

document.getElementById("container").addEventListener('click', function(e) {
  if (e.target.className == "clickable") {
    console.log("I should do something!");
  } else {
    console.log("I should NOT do something!");
  }
});

<div id="container">
  <div class="clickable">
    this is clickable
  </div>
  <div>
    this is not clickable
  </div>
</div>

Answer 2

var parentEl = document.getElementById('parent');
var childEl = document.getElementById('child');

parentEl.addEventListener('click', function(event) {

}, true)
childEl.addEventListener('click', function(event) {

}, true)

If you pass the true on eventListener it stops the event from bubbling.