Element: mouseout-Ereignis
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das mouseout
-Ereignis wird bei einem Element
ausgelöst, wenn ein Zeigegerät (normalerweise eine Maus) verwendet wird, um den Cursor so zu bewegen, dass er sich nicht mehr innerhalb des Elements oder eines seiner Kinder befindet.
mouseout
wird auch an ein Element gesendet, wenn der Cursor ein Kindelement betritt, weil das Kindelement den sichtbaren Bereich des Elements verdeckt.
Wenn das Zielelement Kindelemente hat, werden mouseout
- und mouseover
-Ereignisse ausgelöst, wenn die Maus über die Grenzen dieser Elemente fährt, nicht nur über das Zielelement selbst. In der Regel ist das Verhalten von mouseenter
und mouseleave
sinnvoller, da sie nicht durch den Übergang in Kindelemente beeinflusst werden.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignishandlereigenschaft.
addEventListener("mouseout", (event) => {});
onmouseout = (event) => {};
Ereignistyp
Ein MouseEvent
. Erbt von UIEvent
und Event
.
Ereigniseigenschaften
Dieses Interface erbt auch Eigenschaften seiner Eltern, UIEvent
und Event
.
MouseEvent.altKey
Schreibgeschützt-
Gibt
true
zurück, wenn die alt-Taste gedrückt war, als das Mausereignis ausgelöst wurde. -
Die Nummer der Taste, die gedrückt wurde (falls zutreffend), als das Mausereignis ausgelöst wurde.
-
Die gedrückten Tasten (falls vorhanden), als das Mausereignis ausgelöst wurde.
MouseEvent.clientX
Schreibgeschützt-
Die X-Koordinate des Mauszeigers in Viewport-Koordinaten.
MouseEvent.clientY
Schreibgeschützt-
Die Y-Koordinate des Mauszeigers in Viewport-Koordinaten.
MouseEvent.ctrlKey
Schreibgeschützt-
Gibt
true
zurück, wenn die control-Taste gedrückt war, als das Mausereignis ausgelöst wurde. MouseEvent.layerX
Nicht standardisiert Schreibgeschützt-
Gibt die horizontale Koordinate des Ereignisses relativ zur aktuellen Ebene zurück.
MouseEvent.layerY
Nicht standardisiert Schreibgeschützt-
Gibt die vertikale Koordinate des Ereignisses relativ zur aktuellen Ebene zurück.
MouseEvent.metaKey
Schreibgeschützt-
Gibt
true
zurück, wenn die meta-Taste gedrückt war, als das Mausereignis ausgelöst wurde. MouseEvent.movementX
Schreibgeschützt-
Die X-Koordinate des Mauszeigers relativ zur Position des letzten
mousemove
-Ereignisses. MouseEvent.movementY
Schreibgeschützt-
Die Y-Koordinate des Mauszeigers relativ zur Position des letzten
mousemove
-Ereignisses. MouseEvent.offsetX
Schreibgeschützt-
Die X-Koordinate des Mauszeigers relativ zur Position der Polsterungskante des Zielknotens.
MouseEvent.offsetY
Schreibgeschützt-
Die Y-Koordinate des Mauszeigers relativ zur Position der Polsterungskante des Zielknotens.
MouseEvent.pageX
Schreibgeschützt-
Die X-Koordinate des Mauszeigers relativ zum gesamten Dokument.
MouseEvent.pageY
Schreibgeschützt-
Die Y-Koordinate des Mauszeigers relativ zum gesamten Dokument.
-
Das sekundäre Ziel für das Ereignis, falls es eines gibt.
MouseEvent.screenX
Schreibgeschützt-
Die X-Koordinate des Mauszeigers in Bildschirmkoordinaten.
MouseEvent.screenY
Schreibgeschützt-
Die Y-Koordinate des Mauszeigers in Bildschirmkoordinaten.
MouseEvent.shiftKey
Schreibgeschützt-
Gibt
true
zurück, wenn die shift-Taste gedrückt war, als das Mausereignis ausgelöst wurde. MouseEvent.mozInputSource
Nicht standardisiert Schreibgeschützt-
Der Typ des Geräts, das das Ereignis ausgelöst hat (einer der
MOZ_SOURCE_*
-Konstanten). Dies ermöglicht es Ihnen beispielsweise festzustellen, ob ein Mausereignis von einer tatsächlichen Maus oder von einem Berührungsereignis generiert wurde (was die Genauigkeit der Interpretation der mit dem Ereignis verknüpften Koordinaten beeinflussen könnte). MouseEvent.webkitForce
Nicht standardisiert Schreibgeschützt-
Der Druck, der beim Klicken ausgeübt wird.
MouseEvent.x
Schreibgeschützt-
Alias für
MouseEvent.clientX
. MouseEvent.y
Schreibgeschützt-
Alias für
MouseEvent.clientY
.
Beispiele
Die folgenden Beispiele zeigen die Verwendung des mouseout
-Ereignisses.
mouseout und mouseleave
Das folgende Beispiel verdeutlicht den Unterschied zwischen mouseout
- und mouseleave
-Ereignissen. Das mouseleave
-Ereignis wird dem <ul>
hinzugefügt, um die Liste lila zu färben, wann immer die Maus den <ul>
verlässt. mouseout
wird der Liste hinzugefügt, um das gezielte Element orange zu färben, wenn die Maus es verlässt.
Wenn Sie dies ausprobieren, werden Sie feststellen, dass mouseout
an die einzelnen Listenelemente gesendet wird, während mouseleave
zur gesamten Liste geht, dank der Hierarchie der Elemente und der Tatsache, dass Listenelemente den darunterliegenden <ul>
verdecken.
HTML
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
JavaScript
const test = document.getElementById("test");
// Briefly make the list purple when the mouse moves off the
// <ul> element
test.addEventListener(
"mouseleave",
(event) => {
// highlight the mouseleave target
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 1000);
},
false,
);
// Briefly make an <li> orange when the mouse moves off of it
test.addEventListener(
"mouseout",
(event) => {
// highlight the mouseout target
event.target.style.color = "orange";
// reset the color after a short delay
setTimeout(() => {
event.target.style.color = "";
}, 500);
},
false,
);
Ergebnis
Spezifikationen
Specification |
---|
UI Events # event-type-mouseout |
HTML # handler-onmouseout |