stopPropagation vs. stopImmediatePropagation

314

Jaka jest różnica pomiędzy event.stopPropagation() i event.stopImmediatePropagation()?

javascript jquery

— Arjun
źródło

321

stopPropagationuniemożliwi jakiekolwiek macierzyste teleskopowe z wykonywany stopImmediatePropagationbędzie uniknąć teleskopowe rodzicielskich , a także wszelkie inne programy obsługi z wykonaniem

Szybki przykład z dokumentacji jquery:

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

Rozwiń fragment kodu

Pamiętaj, że kolejność wiązania zdarzeń jest tutaj ważna!

Pokaż fragment kodu

$("p").click(function(event) {
  // This function will now trigger
  $(this).css("background-color", "#f00");
});

$("p").click(function(event) {
  event.stopImmediatePropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>example</p>

Rozwiń fragment kodu

— Dave
źródło

1

Podkreślasz „rodzica”, ale w rzeczywistości oba przestają również wchodzić do dzieci, jeśli zostaną wezwane w fazie przechwytywania! Zobacz moją odpowiedź, aby poznać szczegóły.

— Robert Siemer

57

Mały przykład pokazujący, jak działają oba te przestoje propagacji.

Pokaż fragment kodu

var state = {
  stopPropagation: false,
  stopImmediatePropagation: false
};

function handlePropagation(event) {
  if (state.stopPropagation) {
    event.stopPropagation();
  }

  if (state.stopImmediatePropagation) {
    event.stopImmediatePropagation();
  }
}

$("#child").click(function(e) {
  handlePropagation(e);
  console.log("First event handler on #child");
});


$("#child").click(function(e) {
  handlePropagation(e);
  console.log("Second event handler on #child");
});

// First this event will fire on the child element, then propogate up and
// fire for the parent element.
$("div").click(function(e) {
  handlePropagation(e);
  console.log("Event handler on div: #" + this.id);
});


// Enable/disable propogation
$("button").click(function() {
  var objectId = this.id;
  $(this).toggleClass('active');
  state[objectId] = $(this).hasClass('active');
  console.log('---------------------');
});

div {
  padding: 1em;
}

#parent {
  background-color: #CCC;
}

#child {
  background-color: #000;
  padding: 5em;
}

button {
  padding: 1em;
  font-size: 1em;
}

.active {
  background-color: green;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="child">&nbsp;</div>
</div>

<button id="stopPropagation">Stop Propogation</button>
<button id="stopImmediatePropagation" ">Stop Immediate Propogation</button>

Rozwiń fragment kodu

Są powiązane trzy procedury obsługi zdarzeń. Jeśli nie zatrzymamy żadnej propagacji, powinny pojawić się cztery alerty - trzy dotyczące div dziecka i jeden dla div rodzica.

Jeśli zatrzymamy rozprzestrzenianie się wydarzenia, pojawią się 3 alerty (wszystkie na wewnętrznym div dziecka). Ponieważ zdarzenie nie będzie propagowane w hierarchii DOM, div nadrzędny go nie zobaczy, a jego moduł obsługi nie uruchomi się.

Jeśli natychmiast zatrzymamy propagację, pojawi się tylko 1 alert. Mimo że do wewnętrznego div potomka są dołączone trzy procedury obsługi zdarzeń, wykonywana jest tylko 1, a wszelkie dalsze propagacje są natychmiast zabijane, nawet w obrębie tego samego elementu.

— Anurag
źródło

Oba stopPropagation()warianty również przestaną się propagować w hierarchii DOM. Nie tylko w górę. Proszę sprawdzić moją odpowiedź, aby uzyskać szczegółowe informacje na temat fazy przechwytywania.

— Robert Siemer

26

Z jQuery API :

Oprócz powstrzymania wykonywania jakichkolwiek dodatkowych procedur obsługi elementu, ta metoda zatrzymuje również propagację poprzez niejawne wywołanie event.stopPropagation (). Aby po prostu zapobiec przenikaniu zdarzenia do elementów nadrzędnych, ale umożliwić innym modułom obsługi zdarzeń wykonywanie tego samego elementu, możemy zamiast tego użyć event.stopPropagation ().

Użyj event.isImmediatePropagationStopped (), aby dowiedzieć się, czy ta metoda została kiedykolwiek wywołana (dla tego obiektu zdarzenia).

W skrócie: event.stopPropagation()umożliwia wykonanie innych procedur obsługi tego samego elementu, a jednocześnie event.stopImmediatePropagation()zapobiega uruchomieniu każdego zdarzenia.

— Aron Rotteveel
źródło

Dla pewności natywna wersja javascript event.stopImmediatePropagationnie przestaje bulgotać, prawda?

— Alexander Derck

Dzieje się tak, bąbelkowanie następuje, gdy zdarzenie jest propagowane do elementów nadrzędnych, stopImmediatePropagationzatrzymuje okres propagacji zdarzenia, oba z nich powinny zapobiegać propagacji, nic nie warte, że można również zmienić tryb przechwytywania, który wyzwoli najpierw najbardziej zewnętrzne elementy i tylko wtedy zejdź do dzieci (bąbelkowanie jest domyślne i działa w przeciwnym kierunku)

— JonnySerra

1

Nie do końca, co najmniej. Zatrzymanie się w fazie przechwytywania nie pozwoli na obsługę manipulatorów bąbelkowych na tym samym elemencie, jak wyjaśniono w mojej odpowiedzi.

— Robert Siemer

23

event.stopPropagationzapobiegnie uruchomieniu programów obsługi elementów nadrzędnych.
Wywołanie event.stopImmediatePropagationzapobiegnie również uruchomieniu innych programów obsługi tego samego elementu.

— SLaks
źródło

21

Warto wspomnieć, że procedury obsługi zdarzeń są wykonywane w kolejności, w jakiej zostały dołączone do elementu.

— Felix Kling

18

Jestem spóźniony, ale może mogę to powiedzieć na podstawie konkretnego przykładu:

Powiedz, jeśli masz <table>, z <tr>, a następnie <td>. Teraz, powiedzmy, że zestaw 3 obsługi zdarzeń dla <td>elementu, a następnie, jeśli nie event.stopPropagation()w pierwszym obsługi zdarzeń dla ustawionej <td>, wówczas wszystkie funkcje obsługi zdarzeń dla <td>nadal będą działać , ale zdarzenie po prostu nie będzie rozprzestrzeniać się <tr>lub <table>(i nie będzie idą w górę i do <body>, <html>, document, i window).

Teraz jednak, jeśli używasz event.stopImmediatePropagation()w swoim pierwszym obsługi zdarzeń, a następnie, dwa pozostałe do obsługi zdarzeń <td>nie będzie działać i nie będzie rozprzestrzeniać się do <tr>, <table>(a nie pójdą w górę i do <body>, <html>, document, i window).

Pamiętaj, że to nie tylko dla <td>. W przypadku innych elementów będzie on przestrzegać tej samej zasady.

— niepolarność
źródło

10

1) event.stopPropagation(): => Służy do zatrzymania wykonywania tylko odpowiedniego nadrzędnego modułu obsługi.

2) event.stopImmediatePropagation(): => Służy do zatrzymania wykonywania odpowiedniego nadrzędnego modułu obsługi, a także modułu obsługi lub funkcji dołączonej do niego z wyjątkiem bieżącego modułu obsługi. => Zatrzymuje także całą procedurę obsługi dołączoną do bieżącego elementu całego DOM.

Oto przykład: Jsfiddle !

Dzięki, -Sahil

— Sahil Kashetwar
źródło

3

event.stopPropagation () pozwala na wykonanie innych procedur obsługi tego samego elementu, podczas gdy event.stopImmediatePropagation () zapobiega uruchomieniu każdego zdarzenia. Na przykład patrz poniżej blok kodu jQuery.

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

Jeśli w poprzednim przykładzie użyto event.stopPropagation , to następne zdarzenie click na elemencie p, które zmienia css, zostanie uruchomione, ale w przypadku event.stopImmediatePropagation () , następne zdarzenie p click nie zostanie uruchomione.

— Rahul Kumar
źródło

2

O dziwo, wszystkie inne odpowiedzi mówią tylko połowę prawdy lub są w rzeczywistości błędne!

e.stopImmediatePropagation() powstrzymuje dalsze wywoływanie przed tym wydarzeniem, bez wyjątków
e.stopPropagation()jest podobny, ale nadal wywołuje wszystkie procedury obsługi dla tej fazy na tym elemencie, jeśli nie został już wywołany

Jaka faza

Np. Zdarzenie kliknięcia zawsze najpierw przechodzi do końca DOM (zwane „fazą przechwytywania”), w końcu dociera do źródła zdarzenia („faza docelowa”), a następnie ponownie podnosi się („faza bąbelkowa”). I zaddEventListener() niemu możesz zarejestrować wiele programów obsługi dla fazy przechwytywania i fazy bąbelkowej niezależnie. (Faza docelowa wywołuje procedury obsługi obu typów w celu bez rozróżnienia.)

I o tym inne odpowiedzi są niepoprawne:

quote: „event.stopPropagation () pozwala na wykonanie innych procedur obsługi tego samego elementu”
korekta: jeśli zatrzymany w fazie przechwytywania, procedury fazy bąbelkowej nigdy nie zostaną osiągnięte, pomijając je również w tym samym elemencie
cytat: „event.stopPropagation () [...] służy do zatrzymania wykonywania tylko odpowiedniego nadrzędnego modułu obsługi”
korekta: jeśli zatrzyma się w fazie przechwytywania, osoby zajmujące się jakimkolwiek dzieckiem, w tym celem, również nie są nazywane, nie tylko rodzice

_{Skrzypce i mozilla.org faza wydarzenie wyjaśnienie z demo.}

— Robert Siemer
źródło

1

Tutaj dodaję mój przykład JSfiddle dla stopPropagation vs stopImmediatePropagation. JSFIDDLE

let stopProp = document.getElementById('stopPropagation');
let stopImmediate = document.getElementById('stopImmediatebtn');
let defaultbtn = document.getElementById("defalut-btn");


stopProp.addEventListener("click", function(event){
	event.stopPropagation();
  console.log('stopPropagation..')
  
})
stopProp.addEventListener("click", function(event){
  console.log('AnotherClick')
  
})
stopImmediate.addEventListener("click", function(event){
		event.stopImmediatePropagation();
    console.log('stopimmediate')
})

stopImmediate.addEventListener("click", function(event){
    console.log('ImmediateStop Another event wont work')
})

defaultbtn.addEventListener("click", function(event){
    alert("Default Clik");
})
defaultbtn.addEventListener("click", function(event){
    console.log("Second event defined will also work same time...")
})

div{
  margin: 10px;
}

<p>
The simple example for event.stopPropagation and stopImmediatePropagation?
Please open console to view the results and click both button.
</p>
<div >
<button id="stopPropagation">
stopPropagation-Button
</button>
</div>
<div  id="grand-div">
  <div class="new" id="parent-div">
    <button id="stopImmediatebtn">
    StopImmediate
    </button>
  </div>
</div>
<div>
<button id="defalut-btn">
Normat Button
</button>
</div>

Rozwiń fragment kodu

— Abhilash
źródło