.stopPropagation() и .stopImmediatePropagation() - это два метода объекта события в JavaScript, которые используются для предотвращения дальнейшего распространения события по цепочке всплытия.

.stopPropagation() - это метод, который предотвращает дальнейшее распространение события по цепочке всплытия, но позволяет другим обработчикам на том же элементе обработать событие.

Пример использования .stopPropagation():

document.querySelector(".child").addEventListener("click", function (event) {
  event.stopPropagation() // остановка распространения клика по цепочке всплытия
  console.log("child clicked")
})
 
document.querySelector(".parent").addEventListener("click", function (event) {
  console.log("parent clicked")
})

В этом примере мы используем метод .stopPropagation() для остановки распространения клика по цепочке всплытия на дочернем элементе с классом .child. Затем мы добавляем обработчик события click на родительском элементе с классом .parent. Если мы кликаем на дочернем элементе, событие не распространяется на родительский элемент, и выводится только сообщение “child clicked”. Если мы кликаем на родительском элементе, событие распространяется по цепочке всплытия, и выводится сообщение “child clicked” и “parent clicked”.

.stopImmediatePropagation() - это метод, который предотвращает дальнейшее распространение события по цепочке всплытия и предотвращает выполнение других обработчиков на том же элементе.

Пример использования .stopImmediatePropagation():

document.querySelector(".child").addEventListener("click", function (event) {
  event.stopImmediatePropagation() // остановка распространения клика по цепочке всплытия и выполнение других обработчиков на этом элементе
  console.log("child clicked")
})
 
document.querySelector(".child").addEventListener("click", function (event) {
  console.log("second child clicked")
})
 
document.querySelector(".parent").addEventListener("click", function (event) {
  console.log("parent clicked")
})

В этом примере мы используем метод .stopImmediatePropagation() для остановки распространения клика по цепочке всплытия на дочернем элементе с классом .child и предотвращения выполнения другого обработчика на этом элементе. Затем мы добавляем другой обработчик события click на том же дочернем элементе с классом .child. Если мы кликаем на дочернем элементе, событие не распространяется на родительский элемент и не выполняется другой обработчик на том же элементе. Вместо этого выводится только сообщение “child clicked”.

Назад