HTML DOM MouseEvent
The MouseEvent Object handles events that occur when the mouse interacts with the HTML document.
Mouse Events
| Event | Occurs When |
|---|---|
| onclick | A user clicks on an element |
| oncontextmenu | A user right-clicks on an element |
| ondblclick | A user double-clicks on an element |
| onmousedown | A mouse button is pressed over an element |
| onmouseenter | The mouse pointer moves into an element |
| onmouseleave | The mouse pointer moves out of an element |
| onmousemove | The mouse pointer moves over an element |
| onmouseout | The mouse pointer moves out of an element |
| onmouseover | The mouse pointer moves onto an element |
| onmouseup | A mouse button is released over an element |
MouseEvent Properties
| Property | Returns |
|---|---|
| altKey | If the ALT key is pressed |
| button | Which mouse button is pressed |
| buttons | Which mouse buttons were pressed |
| clientX | The X coordinate of the mouse pointer (window relative) |
| clientY | The Y coordinate of the mouse pointer (window relative) |
| ctrlKey | If the CTRL key is pressed |
| detail | The details about an event |
| metaKey | If the META key is pressed |
| offsetX | The X coordinate of the mouse pointer (target relative) |
| offsetY | The Y coordinate of the mouse pointer (target relative) |
| pageX | The X coordinate of the mouse pointer (document relative) |
| pageY | The Y coordinate of the mouse pointer (document relative) |
| relatedTarget | The element that triggered the mouse event |
| screenX | The X coordinate of the mouse pointer (screen relative) |
| screenY | The Y coordinate of the mouse pointer (screen relative) |
| shiftKey | If the SHIFT key is pressed |
| which | Deprecated (Avoid using it) Use the button property instead |
Inherited Properties and Methods
The MouseEvent inherits all the properties and methods from:
Element: 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.
Syntax
Use the event name in methods like addEventListener() , or set an event handler property.
addEventListener("mousemove", (event) => >); onmousemove = (event) => >;
Event type
Event properties
This interface also inherits properties of its parents, UIEvent and Event . MouseEvent.altKey Read only Returns true if the alt key was down when the mouse event was fired. MouseEvent.button Read only The button number that was pressed (if applicable) when the mouse event was fired. MouseEvent.buttons Read only The buttons being pressed (if any) when the mouse event was fired. MouseEvent.clientX Read only The X coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.clientY Read only The Y coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.ctrlKey Read only Returns true if the control key was down when the mouse event was fired. MouseEvent.layerX Non-standard Read only Returns the horizontal coordinate of the event relative to the current layer. MouseEvent.layerY Non-standard Read only Returns the vertical coordinate of the event relative to the current layer. MouseEvent.metaKey Read only Returns true if the meta key was down when the mouse event was fired. MouseEvent.movementX Read only The X coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.movementY Read only The Y coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.offsetX Read only The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.offsetY Read only The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.pageX Read only The X coordinate of the mouse pointer relative to the whole document. MouseEvent.pageY Read only The Y coordinate of the mouse pointer relative to the whole document. MouseEvent.relatedTarget Read only The secondary target for the event, if there is one. MouseEvent.screenX Read only The X coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.screenY Read only The Y coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.shiftKey Read only Returns true if the shift key was down when the mouse event was fired. MouseEvent.mozInputSource Non-standard Read only The type of device that generated the event (one of the MOZ_SOURCE_* constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). MouseEvent.webkitForce Non-standard Read only The amount of pressure applied when clicking. MouseEvent.x Read only Alias for MouseEvent.clientX . MouseEvent.y Read only Alias for MouseEvent.clientY .
Examples
The following example uses the mousedown , mousemove , and mouseup events to allow the user to draw on an HTML canvas. Its functionality is simple: the thickness of the line is set to 1, and the color is always black. When the page loads, constants myPics and context are created to store a reference to the canvas and the 2d context we will use to draw. Drawing begins when the mousedown event fires. First we store the x and y coordinates of the mouse pointer in the variables x and y , and then set isDrawing to true. As the mouse moves over the page, the mousemove event fires. If isDrawing is true, the event handler calls the drawLine function to draw a line from the stored x and y values to the current location. When the drawLine() function returns, we adjust the coordinates and then save them in x and y . The mouseup event draws the final line segment, sets x and y to 0 , and stops further drawing by setting isDrawing to false .
HTML
h1>Drawing with mouse eventsh1> canvas id="myPics" width="560" height="360">canvas>
CSS
canvas border: 1px solid black; width: 560px; height: 360px; > JavaScript
// When true, moving the mouse draws on the canvas let isDrawing = false; let x = 0; let y = 0; const myPics = document.getElementById("myPics"); const context = myPics.getContext("2d"); // event.offsetX, event.offsetY gives the (x,y) offset from the edge of the canvas. // Add the event listeners for mousedown, mousemove, and mouseup myPics.addEventListener("mousedown", (e) => x = e.offsetX; y = e.offsetY; isDrawing = true; >); myPics.addEventListener("mousemove", (e) => if (isDrawing) drawLine(context, x, y, e.offsetX, e.offsetY); x = e.offsetX; y = e.offsetY; > >); window.addEventListener("mouseup", (e) => if (isDrawing) drawLine(context, x, y, e.offsetX, e.offsetY); x = 0; y = 0; isDrawing = false; > >); function drawLine(context, x1, y1, x2, y2) context.beginPath(); context.strokeStyle = "black"; context.lineWidth = 1; context.moveTo(x1, y1); context.lineTo(x2, y2); context.stroke(); context.closePath(); >