jQuery mouseleave Event — Leave Without Child Bubbling

What Is the mouseleave Event?

mouseleave fires when the pointer leaves the element it is bound to. Leaving a child does not fire it (unlike mouseout). Bind with .on("mouseleave", handler) (jQuery 1.7+).

$("#outer").on("mouseleave", function () { ... })
$("#outer").trigger("mouseleave")

// Leave element → fires once
// Leave a child but stay inside element → does NOT fire
// Prefer on/trigger — not the deprecated .mouseleave()

How to Use mouseleave

Select the container, bind leave (and usually enter), avoid mouseout when children would spam handlers.

1. Select the element(s): $("#outer"), $(".card"), etc.
2. Bind: .on("mouseleave", function (event) { ... }).
3. Pair with .on("mouseenter", …) for hover-style UI.
4. To fire in code: .trigger("mouseleave"). Unbind with .off("mouseleave").

Pseudocode

function onMouseleave(element, handler):
    when pointer moves from inside element → outside element:
        handler(event)
    // leaving a child but staying inside element does NOT call handler

trigger(element, "mouseleave"):
    run all mouseleave handlers on element

Cheat Sheet

Keep these facts handy when choosing leave vs out.

Live Preview

Run presets that use .on("mouseleave") and .trigger("mouseleave").

Handler for mouseleave called.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

$("#outer").on("mouseleave", function () {
  console.log("Handler for mouseleave called.");
});

Handler for mouseleave called.

$("#outer").on("mouseleave", function () {
  console.log("Handler for mouseleave called.");
});

$("#other").on("click", function () {
  $("#outer").trigger("mouseleave");
});

Handler for mouseleave called.

var leaveCount = 0;
var outCount = 0;

$("#leaveBox").on("mouseleave", function () {
  leaveCount += 1;
  console.log("mouseleave:", leaveCount);
});

$("#outBox").on("mouseout", function () {
  outCount += 1;
  console.log("mouseout:", outCount);
});
// Leave each box entirely, and also leave Inner while staying in the box:
// mouseleave stays 1 for full leave; mouseout increases on Inner too.

mouseleave: 1
mouseout: 1
mouseout: 2

$("#card")
  .on("mouseenter", function () {
    console.log("mouse enter");
  })
  .on("mouseleave", function () {
    console.log("mouse leave");
  });

mouse enter
mouse leave

Performance Notes

Prefer mouseenter / mouseleave for UI hover — fewer accidental re-entries means less work and cleaner state.

Key Takeaways