Zdarzenia#

Typ mousemove#

Typ:mousemove
Interfejs:MouseEvent
Sync / Async:Sync
BąbelkowanieTak
Zaufane celeElement
AnulowanieTak
Domyślna akcjaBrak
Kontekst
(zaufane zdarzenia)

Zdarzenie typu mousemove musi zostać wysłane przez aplikację kliencką w chwili, kiedy urządzenie wskazujące jest przemieszczane w obrębie granicy elementu. Wskaźnik częstotliwość wysyłania zdarzenia jest zależny od specyfiki implementacji, urządzenia oraz platformy, ale kilka kolejnych zdarzeń mousemove powinno zostać odpalonych dla nieprzerwanego przemieszczenia urządzenia wskazującego, zamiast pojedynczego zdarzenia dla każdej instancji ruchu myszy. Implementacje powinny określić optymalny wskaźnik częstotliwości, aby zapewnić równowagę między responsywnością a wydajnością.

W niektórych środowiskach wykonawczych, jak np. przeglądarki internetowe, odpalanie zdarzeń typu mousemove może być ciągle kontynuowane, np. kiedy użytkownik rozpoczął operację przeciągania (tj. przy wciśniętym przycisku myszy) i urządzenie wskazujące opuściło granicę aplikacji klienckiej.

W poprzedniej specyfikacji D2E zdarzenie typu mousemove nie zezwalało na anulowanie, ale ze względu na działanie aktualnych aplikacji klienckich najnowsza definicja uległa zmianie.

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("mousemove", readInfo, true);
		div4.addEventListener("mousemove", readInfo, true);

	</script>

</body>

</html>

Specyfikacje i inne materiały#

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

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