mouseout
Het mouseout
event wordt uitgevoerd wanneer een aanwijzend apparaat (doorgaans een muis) van het element (of een van zijn children) dat de listener aan zich heeft verbonden, af is bewogen.
Algemene info
- Specificatie
- DOM L3
- Interface
- MouseEvent
- Bubbles
- Ja
- Cancelable
- Ja
- Target
- Element
- Default Action
- Geen
Eigenschappen
Property | Type | Description |
---|---|---|
target Read only |
EventTarget |
The event target (the topmost target in the DOM tree). |
type Read only |
DOMString |
The type of event. |
bubbles Read only |
Boolean |
Whether the event normally bubbles or not |
cancelable Read only |
Boolean |
Whether the event is cancellable or not? |
view Read only |
WindowProxy |
document.defaultView (window of the document) |
detail Read only |
long (float ) |
A count of consecutive clicks that happened in a short amount of time, incremented by one. |
currentTarget Read only |
EventTarget | The node that had the event listener attached. |
relatedTarget Read only |
EventTarget | For mouseover , mouseout , mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise. |
screenX Read only |
long | The X coordinate of the mouse pointer in global (screen) coordinates. |
screenY Read only |
long | The Y coordinate of the mouse pointer in global (screen) coordinates. |
clientX Read only |
long | The X coordinate of the mouse pointer in local (DOM content) coordinates. |
clientY Read only |
long | The Y coordinate of the mouse pointer in local (DOM content) coordinates. |
button Read only |
unsigned short | The button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left. |
buttons Read only |
unsigned short | The buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info. |
mozPressure Read only |
float | The amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure). |
ctrlKey Read only |
boolean | true if the control key was down when the event was fired. false otherwise. |
shiftKey Read only |
boolean | true if the shift key was down when the event was fired. false otherwise. |
altKey Read only |
boolean | true if the alt key was down when the event was fired. false otherwise. |
metaKey Read only |
boolean | true if the meta key was down when the event was fired. false otherwise. |
Voorbeeld
Het volgende voorbeeld illustreert het verschil tussen mouseout
en mouseleave
events.
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<script>
var test = document.getElementById("test");
// this handler will be executed only once when the cursor moves off the unordered list
test.addEventListener("mouseleave", function( event ) {
// highlight the mouseleave target
event.target.style.color = "purple";
// reset the color after a short delay
setTimeout(function() {
event.target.style.color = "";
}, 500);
}, false);
// this handler will be executed every time the cursor is moved off a different list-item
test.addEventListener("mouseout", function( event ) {
// highlight the mouseout target
event.target.style.color = "orange";
// reset the color after a short delay
setTimeout(function() {
event.target.style.color = "";
}, 500);
}, false);
</script>
Browsercompatibiliteit
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help! (en-US)
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
---|---|---|---|---|---|---|
Basisondersteuning | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
Op disabled formelementen | (Yes)[1] | 44.0 (44.0)[2] | (Yes) | Niet ondersteund | (Yes)[1] | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basisondersteuning | ? | ? | ? | ? | ? |
Op disabled formelementen | ? | ? | ? | ? | ? |
[1] Werkt alleen voor <textarea> (en-US)-elementen en sommige <input> (en-US) element types.
[2] Geïmplementeerd in bug 218093.