StopPropagation vs. stopImmediatePropagation

Какая разница между event.stopPropagation() и event.stopImmediatePropagation()?

ОТВЕТЫ

Ответ 1

stopPropagation предотвратит выполнение любых родительских обработчиков stopImmediatePropagation, предотвратит выполнение каких-либо родительских обработчиков , а также любых других обработчиков

Быстрый пример из документации jquery:

$("p").click(function(event){
  event.stopImmediatePropagation();
});
$("p").click(function(event){
  // This function won't be executed
  $(this).css("background-color", "#f00");
});

Ответ 2

Добавлен небольшой пример на jsfiddle, чтобы продемонстрировать, как работают обе эти остановки распространения.

Существует три обработчика событий. Если мы не прекращаем распространение, тогда должно быть четыре предупреждения - три на дочернем div и один на родительском div.

Если мы остановим событие от распространения, тогда будет 3 предупреждения (все на внутреннем дочернем div). Поскольку это событие не распространяет иерархию DOM, родительский div не увидит ее, и ее обработчик не будет запускаться.

Если мы немедленно прекратим распространение, тогда будет только одно предупреждение. Несмотря на то, что для внутреннего дочернего div есть три обработчика событий, выполняется только 1, и любое дальнейшее распространение немедленно уничтожается даже внутри одного и того же элемента.

Ответ 3

Из jQuery API:

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

Использование event.isImmediatePropagationStopped() знать, был ли этот метод когда-либо (в этом объекте события).

Вкратце: event.stopPropagation() позволяет выполнять другие обработчики одного и того же элемента, а event.stopImmediatePropagation() предотвращает запуск любого события.

Ответ 4

event.stopPropagation предотвратит запуск обработчиков родительских элементов.
Вызов event.stopImmediatePropagation также предотвратит запуск других обработчиков одного и того же элемента.

Ответ 5

Я поздний участник, но, возможно, я могу сказать это с конкретным примером:

Скажем, если у вас есть <table>, с <tr>, а затем <td>. Теперь предположим, что вы установили 3 обработчика событий для элемента <td>, а если вы сделаете event.stopPropagation() в первом обработчике событий, установленном для <td>, , то все обработчики событий для <td> будут по-прежнему выполняться, но событие просто не будет распространяться на <tr> или <table> (и не будет увеличиваться до <body>, <html>, document и window).

Теперь, если вы используете event.stopImmediatePropagation() в своем первом обработчике событий, тогда остальные два обработчика событий для <td> НЕ запускаются и не будут распространяться до <tr>, <table> (и не будет идти вверх и вверх до <body>, <html>, document и window).

Обратите внимание, что это не только для <td>. Для других элементов он будет следовать тому же принципу.

Ответ 6

event.stopPropagation() позволяет выполнять другие обработчики одного и того же элемента, а event.stopImmediatePropagation() предотвращает запуск каждого события. Например, см. Ниже код кода jQuery.

$("p").click(function(event)
{ event.stopImmediatePropagation();
});
$("p").click(function(event)
{ // This function won't be executed 
$(this).css("color", "#fff7e3");
});

Если в предыдущем примере была использована event.stopPropagation, тогда будет срабатывать следующее событие click на элементе p, которое изменяет css, но в случае event.stopImmediatePropagation(), следующее событие щелчка p не будет срабатывать.

Ответ 7

1) event.stopPropagation():  = > Он используется для остановки выполнения только соответствующего родительского обработчика.

2) event.stopImmediatePropagation():= > Он используется, чтобы остановить выполнение соответствующего обработчика родительского элемента, а также обработчика или функции, прикрепленной к нему, кроме текущего обработчика. = > Он также останавливает весь обработчик, привязанный к текущему элементу всей DOM.

Вот пример: Jsfiddle!

Спасибо, -Sahil