MouseEvent
The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.
MouseEvent derives from UIEvent, which in turn derives from Event. Though the MouseEvent.initMouseEvent() method is kept for backward compatibility, creating of a MouseEvent object should be done using the MouseEvent() constructor.
Several more specific events are based on MouseEvent, including WheelEvent, DragEvent, and PointerEvent.
Instance properties
- MouseEvent.screenX
- The X coordinate of the mouse pointer in screen coordinates.
- MouseEvent.clientX
- The X coordinate of the mouse pointer in viewport coordinates.
- MouseEvent.x
- Alias for MouseEvent.clientX.
- MouseEvent.pageX
- The X coordinate of the mouse pointer relative to the whole document.
-
MouseEvent.layerX
(non-standard)
- Returns the horizontal coordinate of the event relative to the current layer.
- MouseEvent.offsetX
- The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
- MouseEvent.screenX
- The X coordinate of the mouse pointer in screen coordinates.
- MouseEvent.clientX
- The X coordinate of the mouse pointer in viewport coordinates.
- MouseEvent.x
- Alias for MouseEvent.clientX.
- MouseEvent.pageX
- The X coordinate of the mouse pointer relative to the whole document.
- MouseEvent.layerX (non-standard)
- Returns the horizontal coordinate of the event relative to the current layer.
- MouseEvent.offsetX
- The X coordinate of the mouse pointer relative to the position of the padding edge of the target node.
Position in target's scroll area
offsetX and offsetY returns the mouse pointer position without taking the scroll into consideration.
If one wishes to get pointer position relative to the scroll area, just like pageX and pageY (when body scrolls), one needs to do the following.
let scrollX = e.offsetX + e.target.scrollLeft;
let scrollY = e.offsetY + e.target.scrollTop;