YouTiponmouseleave Event
-- Learning not just technology, but also dreams!
JavaScript Reference Manual
JavaScript Objects
JavaScript Array Object JavaScript Boolean Object JavaScript Date Object JavaScript Math Object JavaScript Number Object JavaScript String Object JavaScript RegExp Object JavaScript Global Attributes/Functions JavaScript Operators JavaScript Error
Browser Objects
Window Object Navigator Object Screen Object History Object Location Object Storage Object
DOM Objects
HTML DOM Document Object HTML DOM Element Object HTML DOM Attribute Object HTML DOM Event Object HTML DOM Console Object CSSStyleDeclaration Object DOM HTMLCollection
HTML Objects
<a> <area> <audio> <base> <blockquote> <body> <button> <canvas> <col> <colgroup> <datalist> <del> <details> <dialog> <embed> <fieldset> <form> <iframe> <frameset > <img> <ins> <input> - button <input> - checkbox <input> - color <input> - date <input> - datetime <input> - datetime-local <input> - email <input> - file <input> - hidden <input> - image <input> - month <input> - number <input> - range <input> - password <input> - radio <input> - reset <input> - search <input> - submit <input> - text <input> - time <input> - url <input> - week <keygen> <link> <label> <legend> <li> <map> <menu> <menuItem> <meta> <meter> <object> <ol> <optgroup> <option> <param> <progress> <q> <script> <select> <source> <style> <table> <td> <th> <tr> <textarea> <title> <time> <track> <video>
Deep Dive
Web Services
Development Tools
Computer Science
Programming Languages
Web Design and Development
Web Service
Scripts
Programming
Software
Scripting Languages
onmouseleave Event
Example
Execute JavaScript when the mouse pointer moves out of the pointer:
<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">Click "Try it" in the following examples to see more demonstrations.
Definition and Usage
The onmouseleave event is triggered when the mouse moves out of an element.
Tip: This event is often used with the onmouseenter event, which is triggered when the mouse moves over an element.
Tip: The onmouseleave event is similar to the onmouseout event. The only difference is that the onmouseleave event does not support bubbling.
Browser Support
The numbers in the table indicate the first browser version that supports the event.
| Event | |||||
|---|---|---|---|---|---|
| onmouseleave | 30.0 | 5.5 | Yes | 6.1 | 11.5 |
Syntax
In HTML:
<element onmouseleave="myScript">In JavaScript:
object.onmouseleave=function(){myScript};In JavaScript, using the addEventListener() method:
object.addEventListener("mouseleave", myScript);Note: Internet Explorer 8 and earlier versions do not support the addEventListener() method.
Technical Details
| Supports Bubbling: | No |
| Can be Cancelled: | No |
| Event Type: | MouseEvent |
| Supported HTML Tags: | All HTML elements, except: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title> |
More Examples
Example
This example demonstrates the difference between onmousemove, onmouseleave, and onmouseout events:
<div onmousemove="myMoveFunction()">
<p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseleave="myLeaveFunction()">
<p id="demo2">I will demonstrate onmouseleave!</p>
</div>
<div onmouseout="myOutFunction()">
<p id="demo3">I will demonstrate onmouseout!</p>
</div>