jQuery Mouse Events

Beginner

8 min read

Updated: Nov 2026

22 method guides

Method index

Index

About This Index

This page is the jQuery Mouse Events index for the tutorial track. Each row links to a full guide with syntax, examples, and FAQs.

Learn the jQuery overview on /jquery. Use this page when you need a mouse event such as click, mouseenter, or mousemove.

Beginner path.

Start with click, then mouseenter / mouseleave—add mousemove when you need coordinates. Prefer .on() over the legacy shorthands.

Syntax

How to Call a Mouse Event

Bind with .on(), delegate for dynamic lists, and fire with .trigger():

jQuery

$("#btn").on("click", function () {
  console.log("clicked");
});

$("#list").on("click", "li", function () {
  console.log($(this).text());        // works for future <li>
});

$("#card").on("mouseenter", function () {
  $(this).addClass("hover");
}).on("mouseleave", function () {
  $(this).removeClass("hover");
});

$("#pad").on("mousemove", function (event) {
  console.log(event.pageX, event.pageY);
});

$("#btn").trigger("click");

Browse

jQuery Mouse Events Table

All Mouse Events guides in this jQuery tutorial series (22 tutorials).

Click Actions

7 methods

Primary pointer actions — click, double-click, right-click, and legacy toggle handlers.

Method	Description	Tutorial
`click`	Bind or trigger when the mouse button is pressed and released over an element.	Try it
`.click()`	Deprecated shorthand — prefer .on('click') and .trigger('click') (since 3.3).	Try it
`dblclick`	Bind or trigger when the user double-clicks an element.	Try it
`.dblclick()`	Deprecated shorthand — prefer .on('dblclick') and .trigger('dblclick') (since 3.3).	Try it
`contextmenu`	Bind or trigger on right-click — often paired with preventDefault() for custom menus.	Try it
`.contextmenu()`	Deprecated shorthand — prefer .on('contextmenu') and .trigger('contextmenu') (since 3.3).	Try it
`.toggle()`	Removed legacy API for alternating click handlers — use .on('click') with state or .toggleClass().	Try it

Button Press

4 methods

React when a mouse button goes down or up — building blocks of click and drag.

Method	Description	Tutorial
`mousedown`	Bind or trigger when a mouse button is pressed over an element — useful for drag starts.	Try it
`.mousedown()`	Deprecated shorthand — prefer .on('mousedown') and .trigger('mousedown') (since 3.3).	Try it
`mouseup`	Bind or trigger when a mouse button is released over an element.	Try it
`.mouseup()`	Deprecated shorthand — prefer .on('mouseup') and .trigger('mouseup') (since 3.3).	Try it

Enter & Leave

5 methods

Hover without child-crossing noise — mouseenter, mouseleave, and .hover().

Method	Description	Tutorial
`mouseenter`	Fire when the pointer enters an element — does not re-fire on child crossings.	Try it
`.mouseenter()`	Deprecated shorthand — prefer .on('mouseenter') and .trigger('mouseenter') (since 3.3).	Try it
`mouseleave`	Fire when the pointer leaves an element — does not fire on child crossings.	Try it
`.mouseleave()`	Deprecated shorthand — prefer .on('mouseleave') and .trigger('mouseleave') (since 3.3).	Try it
`.hover()`	Deprecated enter/leave shorthand — prefer .on('mouseenter') and .on('mouseleave') (since 3.3).	Try it

Over & Out

4 methods

Bubbling enter/leave variants — filter with relatedTarget or prefer enter/leave.

Method	Description	Tutorial
`mouseover`	Fire when the pointer enters — bubbles on child crossings; prefer mouseenter for hover UI.	Try it
`.mouseover()`	Deprecated shorthand — prefer .on('mouseover') and .trigger('mouseover') (since 3.3).	Try it
`mouseout`	Fire when the pointer leaves — bubbles on child crossings; prefer mouseleave for hover UI.	Try it
`.mouseout()`	Deprecated shorthand — prefer .on('mouseout') and .trigger('mouseout') (since 3.3).	Try it

Pointer Move

2 methods

Track cursor position while the pointer moves inside an element.

Method	Description	Tutorial
`mousemove`	Fire when the pointer moves inside an element — read event.pageX and event.pageY.	Try it
`.mousemove()`	Deprecated shorthand — prefer .on('mousemove') and .trigger('mousemove') (since 3.3).	Try it

Frequently Asked Questions

What are jQuery mouse events?

They respond to pointer interaction: click and dblclick for presses, contextmenu for right-click, mouseenter/mouseleave for hover, and mousemove for tracking position. Bind them with .on() and .off().

Should I use .on('click') or .click()?

Prefer .on('click', handler) and .trigger('click'). Most mouse shorthands (.click, .hover, .mousedown, …) are deprecated since jQuery 3.3.

How do click and mousedown differ?

click fires only after mousedown and mouseup both occur on the same element. mousedown fires as soon as the button is pressed—use it for drag starts; use click for normal button actions.

When should I use mouseenter instead of mouseover?

mouseenter does not re-fire when the pointer crosses into child elements. mouseover does (it bubbles). Prefer mouseenter/mouseleave for hover UI.

Where should I start?

Start with click, then mouseenter/mouseleave (or .hover() migration). Add mousemove when you need coordinates; prefer .on() over legacy shorthands.

Start with click

Open the click event guide—syntax, examples, and FAQs.

click tutorial →

About the author

Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

Experience 12 years building web and cloud systems
Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

16 people found this page helpful

jQuery CSS Methods jQuery Click Event