mouseout

The mouseout event is fired when a pointing device (usually a mouse) is moved off the element that has the listener attached or off one of its children.

General info

Specification: DOM L3
Interface: MouseEvent
Bubbles: Yes
Cancelable: Yes
Target: Element
Default Action: None

Properties

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`)	0.
`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).

Example

The following example illustrates the difference between mouseout and 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>

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Edge	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)
On disabled form elements	(Yes)^[1]	44.0 (44.0)^[2]	(Yes)	Not supported	(Yes)^[1]	?

Feature	Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	?	?	?
On disabled form elements	?	?	?	?	?

[1] Only works for <textarea> elements and some <input> element types.

[2] Implemented in bug 218093.

mouseout

General info

Properties

Example

Browser compatibility

See also

Document Tags and Contributors