Vanilla JS: захватывает элемент упаковки, но не его дочерние элементы - PullRequest
Новая
       84

Vanilla JS: захватывает элемент упаковки, но не его дочерние элементы

2 голосов
/ 28 сентября 2019

У меня есть div (A), который содержит еще один div (B).

Когда я нажимаю на A, я хочу, чтобы e.target было A. Когда я нажимаю на B, я также хочу e.target быть А.

Поскольку вы, должно быть, нажали на элемент обтекания, чтобы получить внутренний элемент, как вы говорите JS никогда не получать B?

Я знаю, что это как-то связано спузырясь, но я бросил на это все, что мог, и, похоже, ничего не помогло. 

// none of these work
e.preventDefault()
e.stopPropagation()
e.stopImmediatePropagation()
e.cancelBubble = true

// adding { capture: false } doesn't help either

Вот сокращенный тестовый пример JSBin для проблемы.https://jsbin.com/wezoyoyito/1/edit?html,css,js,console,output

Ответы [ 2 ]

2 голосов
/ 28 сентября 2019

Вместо этого используйте event.currentTarget, который всегда ссылается на элемент, к которому присоединен слушатель (а не на внутренний элемент, по которому щелкнули): 

document.querySelectorAll('.a').forEach(el => {
  el.addEventListener('click', e => {
    console.log(e.currentTarget.className)
  })
})
.a {
  background: red;
  width: 100px;
  height: 100px;
}

.b {
  background: yellow;
  width: 80px;
  height: 80px;
}
<div class="a">
  A
  <div class="b">B</div>
</div>
1 голос
/ 28 сентября 2019

Я попытался протестировать следующий код и должен работать в соответствии с вашими потребностями. 

document.querySelectorAll('.a').forEach(el => {

  el.addEventListener('click', e => {
     e.preventDefault();
     let target = e.target;
     while (target !== el) {
       target = target.parentNode;
    }
    console.log(Array.from(target.classList)[0])
  });

});
...