mouseout

在本文章中

General info
Properties
Example
Browser compatibility
See also

我们的志愿者还没有将这篇文章翻译为中文 (简体)。加入我们帮助完成翻译！
您也可以阅读此文章的English (US)版。

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. Note that it is also triggered on the parent when you move onto a child element, since you move out of the visible space of the parent.

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	This is always 0 as no button presses trigger this event (mouse movement does).
`buttons` Read only	unsigned short	The buttons depressed 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 depressed, returns the logical sum of the values. E.g., if Left button and Right button are depressed, 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.

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)	No support	(Yes)^[1]	?

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

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

[2] Implemented in bug 218093.