stopPropagation прерывает обработчик событий

0

У меня есть немного головного скребка, когда дело доходит до использования stopPropagation в javascript. По мнению многих разных источников stopPropagation, следует прекратить пузырить событие на родительские элементы, однако, когда я его использую, он, кажется, останавливает событие от вызова после первого щелчка. Я разработал очень простой код, чтобы воспроизвести приведенное ниже поведение:

HTML:

<div id="root">
    <div id="top">
         <h1>Click Me!</h1>

    </div>
</div>

JS/JQuery:

var myEvent = document.createEvent("Event");
myEvent.initEvent("boop", true, true);

$("#root").on('boop', function (e) {
    alert("root boop!");
});

$("#top").on('boop', function (e) {
    // After this is called, this event handler will never fire again.
    e.stopPropagation();
    alert("top boop!");
});

$("h1").click(function (e) {
    $("#top").get(0).dispatchEvent(myEvent);
    // I know that $("#top").trigger will prevent the problem, what is wrong with the form above?

});

Есть и скрипка.

  • 1
    Я не понимаю, что вы спрашиваете? В скрипке нет проблем ...?
  • 0
    @Karl-AndréGagnon Карл-Андре Ганьон Правда? Таким образом, каждый раз, когда вы нажимаете, вы получаете окно с предупреждением?
Показать ещё 2 комментария
Теги:

1 ответ

3
Лучший ответ

Вы отправляете myEvent по которому вы в конечном итоге вызываете .stopPropagation(). Каждый клик после этого использует тот же экземпляр myEvent по которому распространение было остановлено.

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

... или вы можете переписать свой JavaScript следующим образом:

$("#root").on('boop', function (e) {
  alert("root boop!");
});

$("#top").on('boop', function (e) {
  e.stopPropagation();
  alert("top boop!");
});

$("h1").click(function (e) {
  var myEvent = document.createEvent("Event");
  myEvent.initEvent("boop", true, true);
  $("#top").get(0).dispatchEvent(myEvent);
});

Рабочий скрипт JS

Поделиться
  • 0
    и как можно скопировать такое событие?
  • 1
    Ваш ответ объяснил мне, что это был за вопрос! Вы определенно заслуживаете повышения
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню