Handle clicks
Buttons and controls need typed click handling.
React 19+ · Type Alias
MouseEvent
MouseEvent is React’s handler type for mouse interactions on built-in elements. Its event object exposes button state, modifier keys, coordinates, movement, and the related target.
How it works
In React, MouseEvent is the event type used by mouse-related handler props such as onClick, onMouseDown, and onMouseMove. The event object exposes modifier-key state, button information, coordinates, movement data, and the related target, so a typed handler can inspect pointer input without losing React’s event typing.
Syntax
(e: React.MouseEvent<HTMLButtonElement>) => voidParameters
| Name | Type | Description |
|---|---|---|
e | React.MouseEvent | The React mouse event object supplied to the handler; it exposes mouse-specific properties such as coordinates, buttons, modifier keys, movement, and relatedTarget. |
Returns
The handler returns nothing required by the documentation; it performs the event response.
Key points
- Use MouseEvent to type handlers for mouse interactions on React elements.
- The handler receives a React event object with mouse-specific properties.
- MouseEvent exposes modifier state and button information through altKey, button, buttons, and ctrlKey.
- relatedTarget identifies the related element, while screenX and screenY provide screen-relative coordinates.
Common mistakes
- onMouseEnter and onMouseLeave do not provide a capture phase; their propagation behavior differs from ordinary bubbling events.
- MouseEvent describes the handler function type, not a DOM element or a standalone event-listener API.
Example: Reading mouse-event data
export default function Button() {
function handleClick(event: React.MouseEvent<HTMLButtonElement>) {
if (event.button === 0) {
console.log(event.clientX, event.clientY);
}
}
return <button onClick={handleClick}>Click</button>;
}The handler receives a React mouse event and reads button and viewport-coordinate data.
When to use it
Track pointer position
A component must position UI from pointer coordinates.
Interpret input state
Interactions depend on mouse buttons or keyboard modifiers.
Interview questions
QWhat does React’s MouseEvent type represent?
MouseEvent is the React handler type for mouse events. It is used with props such as onClick, onMouseDown, onMouseUp, onMouseOver, and onMouseLeave, and its event object includes coordinates, modifier keys, button state, and relatedTarget.
Follow-up: How would you distinguish a primary-button click? Check the event’s button property and handle the primary-button value rather than assuming every click came from the same button.
QWhich useful properties are available on a React MouseEvent?
The event object provides mouse-specific fields including clientX and clientY for viewport coordinates, pageX and pageY for page coordinates, movementX and movementY for movement, and altKey, ctrlKey, metaKey, and shiftKey for modifiers.
Follow-up: Which coordinate pair is appropriate for viewport-relative positioning? Use clientX and clientY; use pageX and pageY when document scrolling should be included.
QHow do onMouseEnter and onMouseLeave differ in propagation?
onMouseEnter and onMouseLeave are mouse-event handlers, but React documents that they do not have a capture phase. Instead, these events propagate from the element being left to the element being entered.
Follow-up: Why should hover behavior not automatically be implemented with capture handlers? Because these two events have their own propagation model and do not expose a capture phase.
Related
onAuxClickonClickonDoubleClickonMouseDownonMouseEnteronMouseLeaveonMouseMoveonMouseOver