Buttons, Movement, and Hover
Mouse events give you precise control over what happens when users interact with your page using a mouse or trackpad.
Primary Mouse Events
| Event | When it fires |
|---|---|
mousedown | A mouse button is pressed |
mouseup | A pressed mouse button is released |
click | A full press-and-release on the same element |
dblclick | Two clicks in quick succession |
mousemove | The cursor moves (fires for every pixel) |
mouseover | The cursor enters an element |
mouseout | The cursor leaves an element |
contextmenu | Right-click (before the context menu appears) |
Which Mouse Button Was Pressed?
The event.button property tells you:
0: Left button (primary)1: Middle button (scroll wheel click)2: Right button
Warning
dblclick fires AFTER two consecutive click events. If you need to handle both single and double clicks on the same element, you'll need to use a timer to differentiate them, or the double-click will always trigger the single-click handler too.
Tip
To prevent text selection when rapidly clicking, call event.preventDefault() on the mousedown event.