Baseline Widely available
The mouseout event is fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children.
mouseout is also delivered to an element if the cursor enters a child element, because the child element obscures the visible area of the element.
If the target element has child elements, mouseout and mouseover events fire as the mouse moves over the boundaries of these elements too, not just the target element itself. Usually, mouseenter and mouseleave events' behavior is more sensible, because they are not affected by moving into child elements.
Use the event name in methods like addEventListener(), or set an event handler property.
addEventListener("mouseout", (event) => { })
onmouseout = (event) => { }
This interface also inherits properties of its parents, UIEvent and Event.
MouseEvent.altKey Read only
Returns true if the alt key was down when the mouse event was fired.
MouseEvent.button Read only
The button number that was pressed (if applicable) when the mouse event was fired.
MouseEvent.buttons Read only
The buttons being pressed (if any) when the mouse event was fired.
MouseEvent.clientX Read only
The X coordinate of the mouse pointer in viewport coordinates.
MouseEvent.clientY Read only
The Y coordinate of the mouse pointer in viewport coordinates.
MouseEvent.ctrlKey Read only
Returns true if the control key was down when the mouse event was fired.
MouseEvent.layerX Non-standard Read only
Returns the horizontal coordinate of the event relative to the current layer.
MouseEvent.layerY Non-standard Read only
Returns the vertical coordinate of the event relative to the current layer.
MouseEvent.metaKey Read only
Returns true if the meta key was down when the mouse event was fired.
MouseEvent.movementX Read only
The X coordinate of the mouse pointer relative to the position of the last mousemove event.
MouseEvent.movementY Read only
The Y coordinate of the mouse pointer relative to the position of the last mousemove event.
MouseEvent.offsetX Read only
The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
MouseEvent.offsetY Read only
The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node.
MouseEvent.pageX Read only
The X coordinate of the mouse pointer relative to the whole document.
MouseEvent.pageY Read only
The Y coordinate of the mouse pointer relative to the whole document.
The secondary target for the event, if there is one.
MouseEvent.screenX Read only
The X coordinate of the mouse pointer in screen coordinates.
MouseEvent.screenY Read only
The Y coordinate of the mouse pointer in screen coordinates.
MouseEvent.shiftKey Read only
Returns true if the shift key was down when the mouse event was fired.
MouseEvent.mozInputSource Non-standard Read only
The type of device that generated the event (one of the MOZ_SOURCE_* constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event).
MouseEvent.webkitForce Non-standard Read only
The amount of pressure applied when clicking.
MouseEvent.x Read only
Alias for MouseEvent.clientX.
MouseEvent.y Read only
Alias for MouseEvent.clientY.
The following examples show the use of the mouseout event.
The following example illustrates the difference between mouseout and mouseleave events. The mouseleave event is added to the <ul> to color the list purple whenever the mouse exits the <ul>. mouseout is added to the list to color the targeted element orange when the mouse exits it.
When you try this out, you'll find that mouseout is delivered to the individual list items, while mouseleave goes to the overall list, courtesy of the hierarchy of the items and the fact that list items obscure the underlying <ul>.
<ul id="test">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
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);
},
false,
);
// 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);
},
false,
);
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3