Zdarzenia#

Typ mouseleave#

Typ:mouseleave
Interfejs:MouseEvent
Sync / Async:Sync
BąbelkowanieNie
Zaufane celeElement
AnulowanieNie
Domyślna akcjaBrak
Kontekst
(zaufane zdarzenia)

Zdarzenie typu mouseleave musi zostać wysłane przez aplikację kliencką w chwili, kiedy urządzenie wskazujące opuszcza obręb granicy elementu i wszystkich jego elementów potomnych. Zdarzenie to jest bardzo podobne do zdarzenia mouseout, aczkolwiek nie bąbelkuje i nie może być wysyłane dopóki urządzenie wskazujące nie opuści obrębu granicy elementu i obrębu granicy wszystkich jego potomków (szczegóły).

Istnieją pewne podobieństwa pomiędzy zdarzeniem typu mouseleave a selektorową pseudoklasą :focus.

Prosty przykład:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<!DOCTYPE html>
<html>

<head>

	<style>

		div {border: 3px black solid;}
		#DIV1 {background-color: #34669C; width: 400px; height: 220px;}
		#DIV2 {background-color: green; width: 300px; height: 130px; margin: 20px; margin-left: 45px;}
		#DIV3 {background-color: red; width: 200px; height: 40px; margin: 20px; margin-left: 45px;}
		#DIV4 {background-color: white; width: 400px; height: 40px;}

	</style>

</head>

<body>

	<p>Przemieszczaj wskaźnik myszy między różnymi blokami DIV.</p>

	<div id="DIV1">

		&lt;div id="DIV1"&gt;

		<div id="DIV2">

			&lt;div id="DIV2"&gt;

			<div id="DIV3">&lt;div id="DIV3"&gt;<br/>&lt;/div id="DIV3"&gt;</div>

			&lt;/div id="DIV2"&gt;
		</div>

		&lt;/div id="DIV1"&gt;
	</div>

	<div id="DIV4">&lt;div id="DIV4"&gt;<br/>&lt;/div id="DIV4"&gt;</div>

	<p style="color: blue;">Szczegółowe informacje dla przechwyconego zdarzenia:</p>
	<p id="info"></p>

	<script>

		var div1 = document.getElementById("DIV1");
		var div4 = document.getElementById("DIV4");
		var info = document.getElementById("info");

		function readInfo(e){

			var data = "e.type: " + e.type
				+ "<br>" + "e.target.id: " + e.target.id
				+ "<br>" + "e.eventPhase: " + e.eventPhase + "<br><br>";

			info.innerHTML = info.innerHTML + data;

		}

		div1.addEventListener("mouseleave", readInfo, true);
		div1.addEventListener("mouseout", readInfo, true);

		div4.addEventListener("mouseleave", readInfo, true);
		div4.addEventListener("mouseout", readInfo, true);

	</script>

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Zdarzenia (H1) Typ mouseleave (H2) Specyfikacje i inne materiały (H3)