Widely availableSupported across all major browsers. Safe to use in production.
Other Widely available

Mouse events

Mouse events, such as click, mousedown, or mousemove, fire when users interact with an input or pointing device such as a mouse, trackpad, or touchscreen.

Other

Overview

Mouse events, such as click, mousedown, or mousemove, fire when users interact with an input or pointing device such as a mouse, trackpad, or touchscreen.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
MouseEvent
1
12
1
1
18
1
auxclick_event

The auxclick event is fired at an Element when a non-primary pointing device button (any mouse button other than the primary—usually leftmost—button) has been pressed and released both within the same element.
55
79
53
18.2
55
18.2
click_event

An element receives a click event when any of the following occurs:
1
12
6
3
18
1
contextmenu_event

The contextmenu event fires when the user attempts to open a context menu. This event is typically triggered by clicking the right mouse button, or by pressing the context menu key.
1
12
6
3
18
dblclick_event

The dblclick event fires when a pointing device button (such as a mouse's primary button) is double-clicked; that is, when it's rapidly clicked twice on a single element within a very short span of time.
1
12
6
3
18
1
mousedown_event

The mousedown event is fired at an Element when a pointing device button is pressed while the pointer is inside the element.
2
12
6
4
18
3.2
mouseenter_event

The mouseenter event is fired at an Element when a pointing device (usually a mouse) is initially moved so that its hotspot is within the element at which the event was fired.
30
12
10
7
30
7
mouseleave_event

The mouseleave event is fired at an Element when the cursor of a pointing device (usually a mouse) is moved out of it.
30
12
10
7
30
7
mousemove_event

The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.
2
12
6
4
18
3.2
mouseout_event

The mouseout event is fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children.
1
12
6
1
18
1
mouseover_event

The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.
2
12
6
4
18
3.2
mouseup_event

The mouseup event is fired at an Element when a button on a pointing device (such as a mouse or trackpad) is released while the pointer is located inside it.
2
12
6
4
18
3.2
click

The HTMLElement.click() method simulates a mouse click on an element. When called on an element, the element's Element/click_event event is fired (unless its disabled attribute is set).
9
12
3
6
18
6
altKey

The MouseEvent.altKey read-only property is a boolean value that indicates whether the alt key was pressed or not when a given mouse event occurs.
1
12
1.5
1
18
1
button

The MouseEvent.button read-only property indicates which button was pressed or released on the mouse to trigger the event.
1
12
1
1
18
1
buttons

The MouseEvent.buttons read-only property indicates which buttons are pressed on the mouse (or other input device) when a mouse event is triggered.
43
12
15
11.1
43
11.3
clientX

The clientX read-only property of the MouseEvent interface provides the horizontal coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).
1
12
1
1
18
1
clientY

The clientY read-only property of the MouseEvent interface provides the vertical coordinate within the application's viewport at which the event occurred (as opposed to the coordinate within the page).
1
12
1.5
1
18
1
ctrlKey

The MouseEvent.ctrlKey read-only property is a boolean value that indicates whether the ctrl key was pressed or not when a given mouse event occurs.
1
12
1.5
1
18
1
getModifierState

The MouseEvent.getModifierState() method returns the current state of the specified modifier key: true if the modifier is active (i.e., the modifier key is pressed or locked), otherwise, false.
47
12
15
12.1
47
12.2
metaKey

The MouseEvent.metaKey read-only property is a boolean value that indicates whether the meta key was pressed or not when a given mouse event occurs.
1
12
1.5
1
18
1
MouseEvent

The MouseEvent() constructor creates a new MouseEvent object.
26
12
11
7
26
7
movementX

The movementX read-only property of the MouseEvent interface provides the difference in the X coordinate of the mouse (or pointer) between the given move event and the previous move event of the same type.
37
13
41
9
17
movementY

The movementY read-only property of the MouseEvent interface provides the difference in the Y coordinate of the mouse (or pointer) between the given move event and the previous move event of the same type.
37
13
41
9
17
offsetX

The offsetX read-only property of the MouseEvent interface provides the offset in the X coordinate of the mouse pointer between that event and the padding edge of the target node.
1
12
39
1
18
1
offsetY

The offsetY read-only property of the MouseEvent interface provides the offset in the Y coordinate of the mouse pointer between that event and the padding edge of the target node.
1
12
39
1
18
1
pageX

The pageX read-only property of the MouseEvent interface returns the X (horizontal) coordinate (in pixels) at which the mouse was clicked, relative to the left edge of the entire document. This includes any portion of the document not currently visible.
1
12
1.5
1
18
1
pageY

The pageY read-only property of the MouseEvent interface returns the Y (vertical) coordinate (in pixels) at which the mouse was clicked, relative to the top edge of the entire document. This includes any portion of the document not currently visible.
1
12
1.5
1
18
1
relatedTarget

The MouseEvent.relatedTarget read-only property is the secondary target for the mouse event, if there is one.
1
12
1.5
1
18
1
screenX

The screenX read-only property of the MouseEvent interface provides the horizontal coordinate (offset) of the mouse pointer in screen coordinates.
1
12
1.5
1
18
1
screenY

The screenY read-only property of the MouseEvent interface provides the vertical coordinate (offset) of the mouse pointer in screen coordinates.
1
12
1.5
1
18
1
shiftKey

The MouseEvent.shiftKey read-only property is a boolean value that indicates whether the shift key was pressed or not when a given mouse event occurs.
1
12
1.5
1
18
1
x

The MouseEvent.x property is an alias for the MouseEvent.clientX property.
1
12
53
3.1
18
2
y

The MouseEvent.y property is an alias for the MouseEvent.clientY property.
1
12
53
3.1
18
2
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Implementation note
  • Starting in Firefox 68, the `auxclick` event is used to trigger the new tab on middle-click action; previously, this had been done with the `click` event. Apps can prevent middle-click from opening new tabs (or middle-click to paste, if that feature is enabled) by intercepting `auxclick` on links, and `auxclick` event handlers can now open popups without triggering the popup blocker.
Notes 1 item(s)
Implementation note
  • Beginning in Firefox 68, Firefox no longer incorrectly sends a `click` event for buttons other than the primary mouse button; previously, there were circumstances in which this would occur. One example: middle-clicking a link would send a `click` to the document's `<html>` element.
Notes 1 item(s)
Implementation note
  • Starting in Firefox 68, `dblclick` events are only sent for the primary mouse button, per the specification.
Notes 1 item(s)
Implementation note
  • Before Chrome 19, `click()` is only defined on buttons and inputs.
Notes 2 item(s)
Implementation note
  • Before Firefox 5, `click()` is only defined on buttons and inputs, and has no effect on text and file inputs.
  • Starting in Firefox 75, the `click()` function works even when the element is not attached to a DOM tree.
Notes 1 item(s)
Implementation note
  • Before Chrome Android 25, `click()` is only defined on buttons and inputs.
Notes 1 item(s)
Implementation note
  • Restrictions apply depending on OS.
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (37)
Compatibility
  • Available with a vendor prefix: webkit (22)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (41)
Compatibility
  • Available with a vendor prefix: moz (1)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (8)
Compatibility
  • Available with a vendor prefix: webkit (6)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (37)
Compatibility
  • Available with a vendor prefix: webkit (22)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (41)
Compatibility
  • Available with a vendor prefix: moz (1)
Notes 2 item(s)
Removed
  • This feature was removed in a later browser version (8)
Compatibility
  • Available with a vendor prefix: webkit (6)

Syntax

HTML 
document.getElementById('target').addEventListener('click', (e) => {
  console.log('Click position:', e.clientX, e.clientY);
});
document.addEventListener('mousemove', (e) => {
  console.log('Mouse movement:', e.pageX, e.pageY);
});

Live demo

Mouseevent. type

Click, mouseover, mousedown equal. Mouseevent visualize.

PreviewFullscreen

Mousecoordinates. Read

Real-time to mousecoordinates tracking. with mousemove

PreviewFullscreen

Event. emitorder

Mouseoperation time. Eventemitorder.

PreviewFullscreen

Use cases

  • Using Mouse events

    Mouse events, such as click, mousedown, or mousemove, fire when users interact with an input or pointing device such as a mouse, trackpad, or touchscreen.

Cautions

  • May not be supported in older browsers.

Accessibility

  • Verify how this element is announced by screen readers.

Related links

Powered by web-features