JavaScript onmouseleave Event

February 8, 2021 10:45 am IST

You are Here:

JavaScript onmouseleave Event

The onmouseleave event occurs when the mouse pointer is left out of an element.

Note: Unlike onmouseout event, the onmouseleave event will NOT bubble, i.e., The element with onmouseleave event will NOT be affected when the mouse pointer is left out of its child element.

onmouseleave Event as Attribute

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p onmouseleave="myFunction()">Touch me and go</p> <script> function myFunction(){ document.write("You touched"); } </script> </body> </html>

Run

Syntax

As Attribute

As Property

object.onmouseleave = function(){ // code };

Using Event Listener

object.addEventListener("mouseleave" , myScript);

onmouseleave Event as Property

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Touch anywhere and go</p> <script> function myFunction(){ document.write("You touched"); } document.onmouseleave = myFunction; </script> </body> </html>

Run

Using addEventListener() Method

Note: The addEventListener() method is not supported in Internet Explorer 8 and below.

Example

HTML Online Editor

<!DOCTYPE html> <html> <body> <p>Touch me and go</p> <script> var x = document.getElementsByTagName("p")[0]; function myFunction(){ document.write("You touched"); } x.addEventListener("mouseleave", myFunction); </script> </body> </html>

Run