jQuery .mouseleave() Method

What You’ll Learn

The .mouseleave() method is jQuery’s legacy shorthand for binding and triggering the mouseleave event. This tutorial covers .mouseleave(handler) since 1.0, .mouseleave(eventData, handler) since 1.4.3, no-argument .mouseleave() as a trigger, migration to .on("mouseleave") and .trigger("mouseleave"), and why the binding form is deprecated since jQuery 3.3. For the modern mouseleave event API, see the jQuery mouseleave event tutorial.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .click(), .mouseleave(), .keydown(), and dozens more. The .mouseleave() method let you bind a hover-exit handler in one short call: $("#menu").mouseleave(function(){ ... }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

Understanding .mouseleave() matters when reading older dropdown menus, tooltip plugins, and legacy tutorials. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles explicitly — .on("mouseleave", handler) for binding and .trigger("mouseleave") for firing. This page documents the shorthand API and shows how to migrate.

Understanding the .mouseleave() Method

The official jQuery API describes .mouseleave() as a way to bind an event handler to the mouseleave event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched element and calls it when the pointer leaves that element entirely — without firing when moving among nested children, unlike mouseout.

When you call .mouseleave() with no arguments, jQuery synthetically fires the mouseleave event on each matched element. Bound handlers run immediately. This trigger behavior is equivalent to .trigger("mouseleave").

📝 Syntax

The .mouseleave() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("mouseleave") is preferred:

1. Bind a handler — .mouseleave( handler ) (since 1.0, deprecated 3.3)

.mouseleave( handler )

• handler — function executed each time mouseleave fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "mouseleave", handler ).

2. Bind with eventData — .mouseleave( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.mouseleave( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "mouseleave", eventData, handler ).

3. Trigger the event — .mouseleave() (since 1.0)

.mouseleave()

• No arguments — triggers mouseleave on every matched element.
• Runs bound mouseleave handlers.
• Preferred replacement: .trigger( "mouseleave" ).

Official jQuery API migration note

// Deprecated binding
$( "#outer" ).mouseleave( function() {
  $( "#log" ).append( " Handler for `mouseleave` called. " );
} );

// Modern binding
$( "#outer" ).on( "mouseleave", function() {
  $( "#log" ).append( " Handler for `mouseleave` called. " );
} );

// Deprecated trigger
$( "#outer" ).mouseleave();

// Modern trigger
$( "#outer" ).trigger( "mouseleave" );

Return value

• All .mouseleave() signatures return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Five examples cover binding, eventData, triggering, migration from .mouseleave() to .on("mouseleave"), and legacy hide-on-leave menus. Use the Try-it links to run each snippet in the browser. Remember: binding with .mouseleave(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( "#outer" ).mouseleave( function() {
  $( "#log" ).append( " Handler ran via .mouseleave(function(){ ... }). " );
} );

Pointer leaves #outer entirely → log appends handler message

Moving into Inner child inside #outer → handler does NOT fire

Deprecated — prefer .on("mouseleave", fn) for new code

$( ".tooltip" ).mouseleave( { action: "hide" }, function( event ) {
  var id = $( this ).data( "id" );
  $( "#log" ).text(
    "Hide: " + id + " | eventData.action: " + event.data.action
  );
} );

Leave Help A → "Hide: help-a | eventData.action: hide"

Leave Help B → "Hide: help-b | eventData.action: hide"

Same handler, shared eventData on every .tooltip trigger

var count = 0;

$( "#outer" ).mouseleave( function() {
  count++;
  $( "#log" ).text( "Outer handler fired (count: " + count + ")" );
} );

$( "#fire" ).click( function() {
  $( "#outer" ).mouseleave();
} );

Leave #outer directly → count increments

Click #fire → $("#outer").mouseleave() → same handler runs

No-arg .mouseleave() is trigger shorthand — prefer .trigger("mouseleave")

$( "#legacy" ).mouseleave( function() {
  $( "#log" ).text( "Legacy: .mouseleave(function(){ ... }) — deprecated since jQuery 3.3." );
} );

$( "#modern" ).on( "mouseleave", function() {
  $( "#log" ).text( "Modern: .on('mouseleave', function(){ ... }) — use this for new code." );
} );

Leave #legacy → legacy deprecation message

Leave #modern → modern .on("mouseleave") message

Behavior is identical — only the API name differs

$( "#nav-item" )
  .mouseenter( function() {
    $( "#submenu" ).show();
    $( "#log" ).text( "Entered — submenu shown via .mouseenter()." );
  } )
  .mouseleave( function() {
    $( "#submenu" ).hide();
    $( "#log" ).text( "Left — submenu hidden via .mouseleave()." );
  } );

Enter #nav-item → submenu shows (.mouseenter)

Leave #nav-item entirely → submenu hides (.mouseleave)

Migrate to .on("mouseenter") / .on("mouseleave") in new code

🚀 Common Use Cases

• Reading legacy code — recognize $("#menu").mouseleave(fn) as equivalent to .on("mouseleave", fn) in older dropdown plugins.
• Close dropdowns — legacy code uses .mouseleave(fn) to hide submenus — migrate to .on("mouseleave", fn).
• Proxy triggers — $("#btn").click(function(){ $("#panel").mouseleave(); }) — replace inner no-arg .mouseleave() with .trigger("mouseleave").
• Shared eventData — $(".tip").mouseleave({ action: "hide" }, fn) passes metadata without closures.
• Hover pairs — chain .mouseenter(fnIn).mouseleave(fnOut) — same as deprecated .hover().
• Automated testing — test suites may call .mouseleave() to simulate exit — consider .trigger("mouseleave") for explicit intent.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .mouseleave(handler) or .mouseleave(eventData, handler) in new code. Use .on("mouseleave") instead.
• Bind with .mouseleave(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .mouseleave() triggers the event since jQuery 1.0 — prefer .trigger("mouseleave").
• .mouseleave() does not support event delegation — use .on("mouseleave", selector, fn) for dynamic menus.
• Pair with .mouseenter() or .on("mouseenter") for complete hover — not mouseover / mouseout.
• Remove handlers with .off("mouseleave") — not by calling .mouseleave(undefined).
• Legacy code using .mouseleave() still runs in jQuery 3.x — migrate when you refactor those files.
• For the full modern mouseleave guide — vs mouseout, hiding menus, and triggers — see the jQuery mouseleave event tutorial.

💡 Best Practices