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.


```js
addEventListener("mousemove", (event) => {});

onmousemove = (event) => {};
```

Event type
----------

A `MouseEvent`. Inherits from `UIEvent` and `Event`.

Event

UIEvent

MouseEventEvent 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 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.

`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 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


```html
<h1>Drawing with mouse events</h1>
<canvas id="myPics" width="560" height="360"></canvas>
```

### CSS


```css
canvas {
  border: 1px solid black;
  width: 560px;
  height: 360px;
}
```

### JavaScript


```js
// 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 with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Introduction to events
* `mousedown`
* `mouseup`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`