Почему опция захвата не работает в addEventListener - PullRequest
Новая
       16

Почему опция захвата не работает в addEventListener

0 голосов
/ 16 апреля 2020

Моя capture опция, похоже, не работает в addEventListener, она дает мне те же результаты консоли, независимо от того, установлен ли я на true или false.

Я проверил следующее:

  1. Добавить once: true к объекту опции - это работает, но захват не
  2. Заменить capture на useCapture - это тоже не похоже работают и в обоих случаях нет сообщений об ошибках / предупреждений
  3. Я читал в Интернете, что некоторые (более старые, например, chrome версия менее 55) браузеры не поддерживают более новые параметры, такие как once - я использую chrome v88 и попытался открыть файл в Safari тоже на случай, если это проблема, связанная с браузером

Знаете ли вы, что я делаю неправильно? 

function handleClick(e) {
  console.log(this.classList.value);
}
const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', handleClick, {capture: true}));
.one {
  width: 200px;
  height: 200px;
  background-color: green;
}

.two {
  width: 150px;
  height: 150px;
  background-color: blue;
}

.three {
  width: 100px;
  height: 100px;
  background-color: red;
}
<div class="one">
  <div class="two">
    <div class="three">
    </div>
  </div>
</div>

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Он работал для меня, может быть, вы видите те же результаты, это верно, но захват меняет порядок его.

Если вы используете capture: true, вывод:

one two three

, если capture: false, вывод:

three two one

function handleClick(e) { console.log(this.classList.value);}

const divs = document.querySelectorAll('div');

divs.forEach(div => div.addEventListener('click', handleClick, {capture: false}));
main div {
    height: 100px;
    background-color: red;
}
<main>
  <div class="one">
    <div class="two">
      <div class="three">
      </div>
    </div>
  </div>
</main>
0 голосов
/ 16 апреля 2020

Ваш код отлично работает для меня: 

function handleClick(e) {
  console.log(this.classList.value);
}
const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', handleClick, {
  capture: div.classList.contains('capture')
}));
<div class="one capture">
  One
  <div class="two capture">
    Two
    <div class="three capture">
      Three
    </div>
  </div>
</div>

<div class="one bubble">
  One
  <div class="two bubble">
    Two
    <div class="three bubble">
      Three
    </div>
  </div>
</div>
...