mouseleave

Summary

Fires when the user moves the mouse pointer outside the boundaries of the object.

Overview Table

The following example illustrates the difference between mouseout and mouseleave events.

var el = document.getElementById("test");
  function domouseleave(evt){
  if(!evt)evt=window.event;
  var el=(evt.target)?evt.target:evt.srcElement;
  el.style.color='purple';
  setTimeout(function(){
    el.style.color='';
    },500);
  }
  function domouseout(evt){
  if(!evt)evt=window.event;
  var el=(evt.target)?evt.target:evt.srcElement;
  el.style.color='orange';
  setTimeout(function(){
    el.style.color='';
    },500);
  }
  if(el.addEventListener){
    el.addEventListener('mouseleave',domouseleave,false);
    el.addEventListener('mouseout',domouseout,false);
  }
  else{
    el.attachEvent('onmouseleave',domouseleave);
    el.attachEvent('onmouseout', domouseout);
  }

View live example

Usage

 Could be used, for example to play a sound as the user hovers over a menu list.

Notes

Remarks

The event fires only if the mouse pointer is inside the boundaries of the object and the user moves the mouse pointer outside the boundaries of the object. If the mouse pointer is currently outside the boundaries of the object, for the event to fire, the user must move the mouse pointer inside the boundaries of the object and then back outside the boundaries of the object. Initiates any action associated with this event. To invoke this event, do one of the following:

• Move the mouse pointer outside the boundaries of an object.

The pEvtObj parameter is required for the following interfaces:

• HTMLAnchorEvents2
• HTMLAreaEvents2
• HTMLButtonElementEvents2
• HTMLControlElementEvents2
• HTMLDocumentEvents2
• HTMLElementEvents2
• HTMLFormElementEvents2
• HTMLImgEvents2
• HTMLFrameSiteEvents2
• HTMLInputFileElementEvents2
• HTMLInputImageEvents2
• HTMLInputTextElementEvents2
• HTMLLabelEvents2
• HTMLLinkElementEvents2
• HTMLMapEvents2
• HTMLMarqueeElementEvents2
• HTMLObjectElementEvents2
• HTMLOptionButtonElementEvents2
• HTMLScriptEvents2
• HTMLSelectElementEvents2
• HTMLStyleElementEvents2
• HTMLTableEvents2
• HTMLTextContainerEvents2
• HTMLWindowEvents2

Syntax

Standards information

There are no standards that apply here.

Event handler parameters

pEvtObj [in]

Type: ****IHTMLEventObj****

Attributions

• Mozilla Developer Network : [mouseleave event Article]

• Microsoft Developer Network: [mouseleave event Article]