Element: mouseout-Ereignis
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 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 übermittelt, wenn der Cursor ein Kind-Element betritt, da das Kind-Element den sichtbaren Bereich des Elements verdeckt.
Wenn das Ziel-Element Kind-Elemente hat, werden mouseout- und mouseover-Ereignisse ebenfalls ausgelöst, wenn die Maus über die Grenzen dieser Elemente bewegt wird, nicht nur über das Ziel-Element selbst. Gewöhnlich ist das Verhalten der mouseenter- und mouseleave-Ereignisse sinnvoller, da sie nicht betroffen sind, wenn man in Kind-Elemente hineinwechselt.
Syntax
Verwenden Sie den Ereignisnamen in Methoden wie addEventListener() oder setzen Sie eine Event-Handler-Eigenschaft.
addEventListener("mouseout", (event) => { })
onmouseout = (event) => { }
Ereignistyp
Ein MouseEvent. Erbt von UIEvent und Event.
Beispiele
Die folgenden Beispiele zeigen die Verwendung des mouseout-Ereignisses.
mouseout und mouseleave
Das folgende Beispiel illustriert den Unterschied zwischen den mouseout- und mouseleave-Ereignissen. Das mouseleave-Ereignis wird zum <ul> hinzugefügt, um die Liste lila zu färben, wenn die Maus das <ul> verlässt. mouseout wird der Liste hinzugefügt, um das angezielte Element orange zu färben, wenn die Maus es verlässt.
Wenn Sie dies ausprobieren, werden Sie feststellen, dass mouseout an die einzelnen Listenelemente geliefert wird, während mouseleave zur gesamten Liste geht, dank der Hierarchie der Elemente und der Tatsache, dass Listenelemente die darunterliegende <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);
});
// 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);
});
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Pointer Events # mouseout |
| HTML # handler-onmouseout |