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 an einem Element ausgelöst, wenn der Cursor mit einem Zeigegerät (üblicherweise einer Maus) so bewegt wird, dass er sich nicht mehr innerhalb des Elements oder eines seiner Kindelemente befindet.
mouseout wird auch an ein Element übermittelt, wenn der Cursor in ein Kindelement eintritt, da das Kindelement den sichtbaren Bereich des Elements verdeckt.
Wenn das Zielelement Kindelemente hat, werden mouseout- und mouseover-Ereignisse auch ausgelöst, wenn die Maus die Grenzen dieser Kindelemente überschreitet, nicht nur die Grenze des Zielelements selbst. Das Verhalten der Ereignisse mouseenter und mouseleave ist in der Regel besser geeignet, da sie nicht durch das Bewegen des Cursors in Kindelemente beeinflusst werden.
Syntax
Verwenden Sie den Ereignisnamen in addEventListener():
addEventListener("mouseout", (event) => { })
Alternativ können Sie ihn der Event-Handler-Eigenschaft der Schnittstelle zuweisen:
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 veranschaulicht den Unterschied zwischen den Ereignissen mouseout und mouseleave. Das mouseleave-Ereignis wird dem <ul>-Element hinzugefügt, um die Liste lila zu färben, sobald die Maus das <ul>-Element verlässt. mouseout wird der Liste hinzugefügt, um das jeweilige Zielelement orange zu färben, wenn die Maus es verlässt.
Wenn Sie das Beispiel ausprobieren, werden Sie feststellen, dass mouseout an die einzelnen Listeneinträge übermittelt wird, während mouseleave an die gesamte Liste übermittelt wird. Das liegt an der Hierarchie der Elemente und daran, dass die Listeneinträge das darunterliegende <ul>-Element 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 |