Element: mouseleave event
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das mouseleave-Ereignis wird bei einem Element ausgelöst, wenn der Cursor eines Zeigegeräts (normalerweise eine Maus) daraus herausbewegt wird.
mouseleave und mouseout sind ähnlich, unterscheiden sich jedoch darin, dass mouseleave nicht blubbert und mouseout dies tut. Das bedeutet, dass mouseleave ausgelöst wird, wenn der Zeiger das Element und alle seine Nachkommen verlassen hat, während mouseout ausgelöst wird, wenn der Zeiger das Element oder eines der Nachkommen des Elements verlässt, aufgrund des Bubblings (selbst wenn der Zeiger sich noch innerhalb des Elements befindet). Abgesehen davon werden Leave- und Out-Ereignisse für dieselbe Situation zur gleichen Zeit versendet, wenn zutreffend.
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 und nicht auf seine visuelle Position bezieht. Wenn beispielsweise zwei Geschwisterelemente so positioniert sind, dass das eine innerhalb des anderen platziert ist, wird beim Bewegen vom äußeren zum inneren Element mouseleave auf dem äußeren Element ausgelöst, obwohl 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 Ereignisbehandler-Eigenschaft.
addEventListener("mouseleave", (event) => { })
onmouseleave = (event) => { }
Ereignistyp
Ein MouseEvent. Erbt von UIEvent und Event.
Beschreibung
Verhalten von mouseleave-Ereignissen
Ein mouseleave-Ereignis wird an jedes Element der Hierarchie gesendet, wenn es verlassen wird. Hier werden vier Ereignisse an die vier Elemente der Hierarchie gesendet, wenn der Zeiger sich von dem Text zu einem Bereich außerhalb des äußersten hier dargestellten div bewegt.
Verhalten von mouseout-Ereignissen
Ein einziges mouseout-Ereignis wird an das tiefste Element des DOM-Baums gesendet, dann blubbert es die Hierarchie hinauf, bis es von einem Handler abgebrochen oder die Wurzel erreicht wird.
Beispiele
Die mouseout-Dokumentation enthält ein Beispiel, das den Unterschied zwischen mouseout und mouseleave veranschaulicht.
mouseleave
Das folgende triviale Beispiel verwendet das mouseenter-Ereignis, um den Rand des <div> zu ändern, wenn die Maus den dafür vorgesehenen Raum betritt. Es fügt dann einen Eintrag zur Liste mit der Anzahl des mouseenter- oder mouseleave-Ereignisses hinzu.
HTML
<div id="mouseTarget">
<ul id="unorderedList">
<li>No events yet!</li>
</ul>
</div>
CSS
Stilen des <div>, um es besser sichtbar zu machen.
#mouseTarget {
box-sizing: border-box;
width: 15rem;
border: 1px solid #333333;
}
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 #333333";
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
| Spezifikation |
|---|
| Pointer Events # mouseleave |
| HTML # handler-onmouseleave |