Element: mouseleave-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 mouseleave
-Ereignis wird bei einem Element
ausgelöst, wenn der Cursor eines Zeigegeräts (in der Regel eine Maus) aus diesem heraus bewegt wird.
mouseleave
und mouseout
sind ähnlich, unterscheiden sich jedoch darin, dass mouseleave
nicht "bubbled" (es wird nicht zu übergeordneten Elementen weitergeleitet), während mouseout
dies tut. Das bedeutet, dass mouseleave
ausgelöst wird, wenn der Zeiger das Element und all seine Nachkommen verlassen hat, während mouseout
ausgelöst wird, wenn der Zeiger das Element oder eines seiner Nachkommen verlässt, aufgrund des "Bubbling"-Verhaltens (selbst wenn sich der Zeiger noch innerhalb des Elements befindet). Darüber hinaus werden leave
- und out
-Ereignisse für dieselbe Situation gleichzeitig ausgelöst, wenn dies angemessen ist.
Die mouseleave
- und mouseout
-Ereignisse werden nicht ausgelöst, wenn das Element ersetzt oder aus dem DOM entfernt wird.
Beachten Sie, dass "das Verlassen eines Elements" sich auf die Position des Elements im DOM-Baum bezieht, nicht auf seine visuelle Position. Wenn beispielsweise zwei Geschwisterelemente so positioniert sind, dass eines innerhalb des anderen platziert wird, wird das Bewegen aus dem äußeren Element in das innere Element mouseleave
auf dem äußeren Element auslösen, auch wenn sich der Zeiger noch innerhalb der Grenzen des äußeren Elements befindet.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener()
oder setzen Sie eine Ereignis-Handler-Eigenschaft.
addEventListener("mouseleave", (event) => {});
onmouseleave = (event) => {};
Ereignistyp
Ein MouseEvent
. Erbt von UIEvent
und Event
.
Ereigniseigenschaften
Diese Schnittstelle erbt auch Eigenschaften ihrer 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 Schaltfläche, die gedrückt wurde (falls zutreffend), als das Mausereignis ausgelöst wurde.
-
Die derzeit 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 Padding-Kante des Zielknotens.
MouseEvent.offsetY
Schreibgeschützt-
Die Y-Koordinate des Mauszeigers relativ zur Position der Padding-Kante 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 des Ereignisses, falls eines vorhanden ist.
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 erzeugt hat (einer der
MOZ_SOURCE_*
-Konstanten). Damit können Sie z. B. feststellen, ob ein Mausereignis von einer tatsächlichen Maus oder durch ein Touch-Ereignis erzeugt wurde (dies könnte die Genauigkeit beeinflussen, mit der Sie die mit dem Ereignis verbundenen Koordinaten interpretieren). MouseEvent.webkitForce
Nicht standardisiert Schreibgeschützt-
Der angewandte Druck beim Klicken.
MouseEvent.x
Schreibgeschützt-
Alias für
MouseEvent.clientX
. MouseEvent.y
Schreibgeschützt-
Alias für
MouseEvent.clientY
.
Verhalten von mouseleave
-Ereignissen
Ein mouseleave
-Ereignis wird an jedes Element der Hierarchie gesendet, wenn diese verlassen werden. Hier werden vier Ereignisse an die vier Elemente der Hierarchie gesendet, wenn der Zeiger sich vom Text zu einem Bereich außerhalb des äußersten dargestellten div
bewegt.
Verhalten von mouseout
-Ereignissen
Ein einziges mouseout
-Ereignis wird an das tiefste Element des DOM-Baums gesendet. Es "bubbled" dann die Hierarchie hinauf, bis es von einem Handler abgebrochen wird oder die Wurzel erreicht.
Beispiele
Die mouseout
-Dokumentation enthält ein Beispiel, das den Unterschied zwischen mouseout
und mouseleave
veranschaulicht.
mouseleave
Im folgenden einfachen Beispiel wird das mouseenter
-Ereignis verwendet, um den Rand des <div>
zu ändern, wenn der Mauszeiger den ihm zugewiesenen Bereich erreicht. Es wird dann ein Eintrag zur Liste hinzugefügt, mit der Anzahl der mouseenter
- oder mouseleave
-Ereignisse.
HTML
<div id="mouseTarget">
<ul id="unorderedList">
<li>No events yet!</li>
</ul>
</div>
CSS
Styling des <div>
, um es besser sichtbar zu machen.
#mouseTarget {
box-sizing: border-box;
width: 15rem;
border: 1px solid #333;
}
JavaScript
let enterEventCount = 0;
let leaveEventCount = 0;
const mouseTarget = document.getElementById("mouseTarget");
const unorderedList = document.getElementById("unorderedList");
mouseTarget.addEventListener("mouseenter", (e) => {
mouseTarget.style.border = "5px dotted orange";
enterEventCount++;
addListItem(`This is mouseenter event ${enterEventCount}.`);
});
mouseTarget.addEventListener("mouseleave", (e) => {
mouseTarget.style.border = "1px solid #333";
leaveEventCount++;
addListItem(`This is mouseleave event ${leaveEventCount}.`);
});
function addListItem(text) {
// Create a new text node using the supplied text
const newTextNode = document.createTextNode(text);
// Create a new li element
const newListItem = document.createElement("li");
// Add the text node to the li element
newListItem.appendChild(newTextNode);
// Add the newly created list item to list
unorderedList.appendChild(newListItem);
}
Ergebnis
Spezifikationen
Specification |
---|
UI Events # event-type-mouseleave |
HTML # handler-onmouseleave |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
mouseleave event |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support