码农教程 - 一技在手,衣食无忧! tools

目录

onmouseleave Event

❮ Previous Events Reference Next ❯

Example

Call a function when moving the mouse pointer out of an image:

<img onmouseleave="normalImg(this)" src="smiley.gif" alt="Smiley">
Try it Yourself »

More examples below.

Description

The onmouseleave event occurs when the mouse pointer leaves an element.

The onmouseleave event is often used together with the onmouseenter event, which occurs when the mouse pointer enters an element.

Theonmouseleave event is similar to the onmouseout event. The difference is that the onmouseleave event does not bubble (does not propagate up the document hierarchy). See "More Examples" at the bottom of this page to better understand the differences.

Mouse Events

Event Occurs When
onclick The user clicks on an element
oncontextmenu The user right-clicks on an element
ondblclick The user double-clicks on an element
onmousedown A mouse button is pressed over an element
onmouseenter The pointer is moved onto an element
onmouseleave The pointer is moved out of an element
onmousemove The pointer is moving over an element
onmouseout The mouse pointer moves out of an element
onmouseover The mouse pointer is moved over an element
onmouseup The mouse button is released over an element

See Also:

The Mouse Event Object

Tutorial:

JavaScript Events

Syntax

In HTML:

< element onmouseleave=" myScript">
Try it Yourself »

In JavaScript:

object.onmouseleave = function(){ myScript};
Try it Yourself »

In JavaScript, using the addEventListener() method:

object.addEventListener("mouseleave", myScript);
Try it Yourself »

Technical Details

Bubbles: No
Cancelable: No
Event type: MouseEvent
HTML tags: All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
DOM Version: Level 2 Events

More Examples

Example

This example demonstrates the difference between the onmousemove, onmouseleave and onmouseout events:

<div onmousemove="myMoveFunction()">
  <p id="demo1">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>
Try it Yourself »

Browser Support

onmouseleave is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

Chrome Edge Firefox Safari Opera IE
Yes Yes Yes Yes Yes 9-11


❮ Previous Events Reference Next ❯