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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
event.stopPropagation();

gdzie poszczególne człony oznaczają:

Algorytm wywołania metody stopPropagation() nie jest skomplikowany. Dla lepszego zrozumienia tematu prezentuję go w całości:

  1. 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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
         faza przechwytywania             faza celu             faza bąbelkowania

  W1    >     W2     >     W3     >     W     >     W3     >     W2     >     W1
P1 P2 P3      P4                     P5 B1 B2      B3 B4         B5

gdzie:

Oto kilka przykładowych wywołań metody stopPropagation() z poziomu następujących uchwytów:

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:

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
<!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#

  1. L
  2. K
  3. T'
  4. T
  5. A
  6. O
  7. Z'
  8. Z
  9. #
void stopPropagation();

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Event (H1) Event.stopPropagation() (H2) Składnia (H3) Interfejs Web IDL (H3) Specyfikacje i inne materiały (H3)