Какое событие будет вызвано первым, когда остановится барботирование? - PullRequest
Новая
       8

Какое событие будет вызвано первым, когда остановится барботирование?

0 голосов
/ 04 сентября 2018

После захвата будет выполнено всплытие, но что произойдет, когда я позвонил stopPropagation() в фазе всплытия?

изменится ли поток выполнения события? 

var element1 = document.getElementsByClassName('element1')[0],
  element2 = document.getElementsByClassName('element2')[0],
  element3 = document.getElementsByClassName('element3')[0],
  foo = function(e) {
    console.log(this.className);
  },
  stop = function(e) {
    console.log('prevent', this.className);
    e.preventDefault();
  },
  stop1 = function(e) {
    console.log('stop', this.className);
    e.stopPropagation();
  };

element1.addEventListener('click', foo); // bubbling
element1.addEventListener('click', foo, true); // caputring
// You cab change handler to "stop"
element2.addEventListener('click', foo);
element2.addEventListener('click', foo, true);
element3.addEventListener('click', stop1);
element3.addEventListener('click', foo, true);
.element1 {
  background-color: #b0c4de;
  height: 160px;
  width: 400px;
  cursor: pointer;
}

.element2 {
  background-color: pink;
  height: 80px;
  width: 300px;
  position: relative;
  top: 20px;
  left: 50px;
}

.element3 {
  background-color: lightgreen;
  height: 30px;
  width: 200px;
  position: relative;
  top: 10px;
  left: 50px;
}
<h3>Please open Chrome console and click element3</h3>
<div class="element1">element1
  <div class="element2">element2
    <div class="element3">element3</div>
  </div>
</div>

Пример jsfiddle

Для вышеупомянутого ожидаемый результат равен 

element1
element2
element3
stop element3

Выход 

element1
element2
stop element3
element3

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

переключить место EventListeners на элементе 3, как это 

element2.addEventListener('click', foo, true);
 element3.addEventListener('click', foo, true);
 element3.addEventListener('click', stop1);
0 голосов
/ 04 сентября 2018

stopPropagation предотвращает дальнейшее распространение текущего события. Распространение означает, что вы переходите от элемента к следующему (а не к форме прослушивателя события до следующего). element3 в этом случае не находится ни в пузырчатой ​​фазе, ни в фазе захвата, но в целевой фазе:

3. DOM Event Architecture

  • Фаза захвата : объект события распространяется через предков цели из окна в родительский объект цели. Эта фаза также называется фазой захвата.

  • Целевая фаза : объект события прибывает к цели события объекта события. Эта фаза также известна как фаза достижения цели. Если тип события указывает, что событие не всплывает, то объект события будет остановлен после завершения этой фазы.

  • пузырьковая фаза : Объект события распространяется через предков цели в обратном порядке, начиная с родителя цели и заканчивая окном. Эта фаза также называется фазой барботирования.

Так что, если вы находитесь в целевой фазе , тогда на самом деле не имеет значения, подключен ли обработчик событий как всплывающее окно или как захват, потому что нет перехода к другому элементу при переходе от захвата к всплыванию , Таким образом, обработчики событий выполняются в том порядке, в котором они прикреплены, игнорируя флаг фазы.

Поэтому, если вы вызовете stopPropagation, это предотвратит распространение на следующий элемент, но будут вызваны все прослушиватели событий element3 независимо от того, были ли они добавлены с использованием useCapture или нет.

...