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.
Bubbles | Yes |
---|---|
Cancelable | Yes |
Interface | MouseEvent |
Event handler property | onmousemove |
Examples
The following example uses the mousedown
, mousemove
, and mouseup
events to allow the user to draw on an HTML5 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 === true) { drawLine(context, x, y, e.offsetX, e.offsetY); x = e.offsetX; y = e.offsetY; } }); window.addEventListener('mouseup', e => { if (isDrawing === true) { 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 | Status |
---|---|
UI Events The definition of 'mousemove' in that specification. |
Working Draft |
Document Object Model (DOM) Level 3 Events Specification The definition of 'mousemove' in that specification. |
Obsolete |
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
mousemove event | Chrome Full support 2 | Edge Full support 12 | Firefox Full support 6 | IE Full support 9 | Opera Full support 11.6 | Safari Full support 4 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 6 | Opera Android Full support 12.1 | Safari iOS Full support 3.2 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support