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
A MouseEvent
. Inherits from UIEvent
and Event
.
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. -
The button number that was pressed (if applicable) when the mouse event was fired.
-
The buttons being pressed (if any) when the mouse event was fired.
MouseEvent.clientX
Read only-
The X coordinate of the mouse pointer in viewport coordinates.
MouseEvent.clientY
Read only-
The Y coordinate of the mouse pointer in viewport 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.
-
The secondary target for the event, if there is one.
MouseEvent.screenX
Read only-
The X coordinate of the mouse pointer in screen coordinates.
MouseEvent.screenY
Read only-
The Y coordinate of the mouse pointer in 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 events</h1>
<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();
}
Result
Specifications
Specification |
---|
UI Events # event-type-mousemove |
HTML Standard # handler-onmousemove |
Browser compatibility
BCD tables only load in the browser