mouseleave Redirect 2

The mouseleave event is fired when a pointing device (usually a mouse) is moved off the element that has the listener attached.

General info

Default Action


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


The mouseout documentation has an example illustrating the difference between mouseout and mouseleave.

The following example illustrates how to use mouseout to simulate the principle of event delegation for the mouseleave event.

<ul id="test">
    <ul class="leave-sensitive">
      <li>item 1-1</li>
      <li>item 1-2</li>
    <ul class="leave-sensitive">
      <li>item 2-1</li>
      <li>item 2-2</li>

  var delegationSelector = ".leave-sensitive";

  document.getElementById("test").addEventListener("mouseout", function( event ) {
    var target =,
        related = event.relatedTarget,

    // search for a parent node matching the delegation selector
    while ( target && target != document && !( match = matches( target, delegationSelector ) ) ) {
        target = target.parentNode;

    // exit if no matching node has been found
    if ( !match ) { return; }

    // loop through the parent of the related target to make sure that it's not a child of the target
    while ( related && related != target && related != document ) {
        related = related.parentNode;

    // exit if this is the case
    if ( related == target ) { return; }

    // the "delegated mouseleave" handler can now be executed
    // change the color of the text = "orange";
    // reset the color after a small amount of time
    setTimeout(function() { = "";
    }, 500);
  }, false);
  // function used to check if a DOM element matches a given selector
  // the following code can be replaced by this IE8 compatible function:
  function matches( elem, selector ){
    // the matchesSelector is prefixed in most (if not all) browsers
    return elem.matchesSelector( selector );

Document Tags and Contributors

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