mouseout Redirect 1

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 Does the event normally bubble?
cancelable Read only boolean Is it possible to cancel the event?
view Read only WindowProxy document.defaultView (the window of the document).
detail Read only long (float) 0.
currentTarget Read only EventTarget (DOM element) The node that had the event listener attached.
relatedTarget Read only EventTarget (DOM element) 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 (int) The X coordinate of the mouse pointer in global (screen) coordinates.
screenY Read only long (int) The Y coordinate of the mouse pointer in global (screen) coordinates.
clientX Read only long (int) The X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY Read only long (int) The Y coordinate of the mouse pointer in local (DOM content) coordinates.
button Read only unsigned short (int) 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 DOM level 3 unsigned short (int) 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>

Document Tags and Contributors

Contributors to this page: ethertank
Last updated by: ethertank,