Event#
Event.stopPropagation()#
Metoda stopPropagation() przerywa dalszą propagację danego zdarzenia po jego ścieżce propagacji. W efekcie obsługa 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.stopPropagation();
gdzie poszczególne człony oznaczają:
event- zdarzenie będące obiektem kontekstu.
Algorytm wywołania metody stopPropagation() nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:
- Ustaw flagę zatrzymania propagacji dla danego zdarzenia.
Metoda stopPropagation() 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, ale z wyjątkiem kandydujących uchwytów 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 stopPropagation() z poziomu następujących uchwytów:
P1- opuści wszystkie kolejne uchwyty na prawo od siebie, ale zaczynając od kolejnego celuW2, czyli uchwytyP4,P5,B1,B2,B3,B4iB5.B1- opuści wszystkie kolejne uchwyty na prawo od siebie, ale zaczynając od kolejnego celuW3, czyli uchwytyB3,B4iB5.B2- opuści wszystkie kolejne uchwyty na prawo od siebie, ale zaczynając od kolejnego celuW3, czyli uchwytyB3,B4iB5.
Metoda stopPropagation() 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.stopPropagation();
e.preventDefault();
info.innerHTML += "<br><br>" + "e.defaultPrevented: " + e.defaultPrevented; // true
}, false);
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 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>Przerywanie propagacji zdarzenia za pomocą metody stopPropagation() jest bardzo często wykorzystywane przez programistów, szczególnie w trakcie stosowania techniki delegowania zdarzeń.
Interfejs Web IDL#
void stopPropagation();