stopPropagation vs. stopImmediatePropagation

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

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>

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

$("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>

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

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>

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.

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.

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.

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.

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

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.

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.}

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>