Event#
Event.stopImmediatePropagation()#
Metoda stopImmediatePropagation() przerywa dalszą propagację danego zdarzenia po jego ścieżce propagacji. W efekcie obsługa aktualnych i kolejnych uchwytów zdarzeń zostaje zatrzymana.
Składnia#
Samo wywołanie i poszczególne jego części najlepiej objaśnić na zapisie składniowym:
event.stopImmediatePropagation();
gdzie poszczególne człony oznaczają:
event- zdarzenie będące obiektem kontekstu.
Algorytm wywołania metody stopImmediatePropagation() nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Ustaw flagę zatrzymania propagacji i flagę natychmiastowego zatrzymania propagacji dla danego zdarzenia.
Metoda stopImmediatePropagation() może przynieść jakikolwiek efekt dopiero wtedy, kiedy dane zdarzenie zostało wysłane. Po wywołaniu metody wszystkie kolejne uchwyty zdarzeń nie będą obsługiwane, włącznie z kandydującymi uchwytami zdarzeń. Ponowne wywołanie metody nie powoduje już żadnego dodatkowego efektu.
Zamiast zawiłych regułek najlepiej przeanalizować jeden przykład teoretyczny. Załóżmy, że mamy do czynienia z następującą ścieżką propagacji jakiegoś zdarzenia:
faza przechwytywania faza celu faza bąbelkowania
W1 > W2 > W3 > W > W3 > W2 > W1
P1 P2 P3 P4 P5 B1 B2 B3 B4 B5gdzie:
Wx- węzły, które występują na ścieżce propagacji zdarzenia. Zdarzenie utworzone i wysłane zostaje dla węzłaW.Px- uchwyty zdarzeń rejestrowane dla poszczególnych węzłów z obsługą w trakcie fazy przechwytywania/celu.Bx- uchwyty zdarzeń zarejestrowane dla poszczególnych węzłów z obsługą w trakcie fazy celu/bąbelkowania.
Oto kilka przykładowych wywołań metody stopImmediatePropagation() z poziomu następujących uchwytów:
P1- opuści wszystkie kolejne uchwyty na prawo od siebie, ale zaczynając od aktualnego celuW1, czyli uchwytyP2,P3,P4,P5,B1,B2,B3,B4iB5.B1- opuści wszystkie kolejne uchwyty na prawo od siebie, ale zaczynając od aktualnego celuW, czyli uchwytyB2,B3,B4iB5.B2- opuści wszystkie kolejne uchwyty na prawo od siebie, ale zaczynając od aktualnego celuW, czyli uchwytyB3,B4iB5.
Metoda stopImmediatePropagation() nie przerywa domyślnej akcji dla danego zdarzenia. Można to osiągnąć poprzez wywołanie metody Event.preventDefault() na zdarzeniu, ale tylko wtedy gdy zdarzenie na to pozwala, co można sprawdzić za pomocą właściwości Event.cancelable.
Prosty przykład:
<!DOCTYPE html>
<html>
<head>
<script>
// Uruchom po całkowitym załadowaniu dokumentu
window.onload = function(){
var button = document.getElementById("press");
var info = document.getElementById("info");
button.addEventListener("click", function(e){
info.innerHTML += "Interfejs zdarzenia e: " + e // [object MouseEvent]
+ "<br>" + "e.type: " + e.type // click
+ "<br>" + "e.bubbles: " + e.bubbles // true
+ "<br>" + "e.cancelable: " + e.cancelable // true
+ "<br>" + "e.defaultPrevented: " + e.defaultPrevented // false
+ "<br>" + "e.isTrusted: " + e.isTrusted // true
+ "<br>" + "e.eventPhase: " + e.eventPhase // 2
+ "<br>" + "e.timeStamp: " + e.timeStamp // liczba całkowita z wartością zależną od chwili uruchomienia przykładu
+ "<br>" + "e.currentTarget: " + e.currentTarget // [object HTMLInputElement]
+ "<br>" + "e.target: " + e.target; // [object HTMLInputElement]
e.stopImmediatePropagation();
e.preventDefault();
info.innerHTML += "<br><br>" + "e.defaultPrevented: " + e.defaultPrevented; // true
}, false);
// Uchwyt nie zostanie obsłużony ze względu na natychmiastowe przerwanie propagacji zdarzenia
button.addEventListener("click", function(e){
info.innerHTML += "<br><br>" + "Kolejny uchwyt zdarzenia click dla przycisku.";
}, false);
// Uchwyt nie zostanie obsłużony ze względu na natychmiastowe przerwanie propagacji zdarzenia
window.addEventListener("click", function(e){
info.innerHTML += "<br><br>" + "Interfejs zdarzenia e: " + e // [object MouseEvent]
+ "<br>" + "e.currentTarget: " + e.currentTarget // [object Window]
+ "<br>" + "e.target: " + e.target // [object HTMLInputElement]
+ "<br>" + "e.timeStamp: " + e.timeStamp; // liczba całkowita z wartością zależną od chwili uruchomienia przykładu
}, false);
}
</script>
</head>
<body>
<p>Kliknij w przycisk by uzyskać szczegółowe informacje dla zdarzenia.</p>
<input id="press" type="button" value="Kliknij mnie!">
<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
<p id="info"></p>
</body>
</html>Interfejs Web IDL#
void stopImmediatePropagation();