Элемент: событие mousemove

Базовая линия Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Событие mousemove срабатывает на элементе, когда указательное устройство (обычно мышь) перемещается, а курсор находится внутри него.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика события.

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

onmousemove = (event) => {};

Тип события

A MouseEvent. Наследует от UIEvent и Event.

Свойства события

Этот интерфейс также наследует свойства своих родительских элементов, UIEvent и Event.

MouseEvent.altKey Только для чтения: Возвращает true если клавиша alt была нажата во время срабатывания события мыши.
MouseEvent.button Только для чтения: Номер нажатой кнопки (если применимо) во время срабатывания события мыши.
MouseEvent.buttons Только для чтения: Кнопки, нажатые (если есть) во время срабатывания события мыши.
MouseEvent.clientX Только для чтения: Координата X указателя мыши в координатах области просмотра.
MouseEvent.clientY Только для чтения: Координата Y указателя мыши в координатах области просмотра.
MouseEvent.ctrlKey Только для чтения: Возвращает true если клавиша control была нажата во время срабатывания события мыши.
MouseEvent.layerX Нестандартный Только для чтения: Возвращает горизонтальную координату события относительно текущего слоя.
MouseEvent.layerY Нестандартный Только для чтения: Возвращает вертикальную координату события относительно текущего слоя.
MouseEvent.metaKey Только для чтения: Возвращает true если клавиша meta была нажата во время срабатывания события мыши.
MouseEvent.movementX Только для чтения: Координата X указателя мыши относительно положения последнего события mousemove.
MouseEvent.movementY Только для чтения: Координата Y указателя мыши относительно положения последнего события mousemove.
MouseEvent.offsetX Только для чтения: Координата X указателя мыши относительно положения поля отступа целевого узла.
MouseEvent.offsetY Только для чтения: Координата Y указателя мыши относительно положения поля отступа целевого узла.
MouseEvent.pageX Только для чтения: Координата X указателя мыши относительно всего документа.
MouseEvent.pageY Только для чтения: Координата Y указателя мыши относительно всего документа.
MouseEvent.relatedTarget Только для чтения: Второстепенная цель для события, если она есть.
MouseEvent.screenX Только для чтения: Координата X указателя мыши в координатах экрана.
MouseEvent.screenY Только для чтения: Координата Y указателя мыши в координатах экрана.
MouseEvent.shiftKey Только для чтения: Возвращает true если клавиша shift была нажата во время срабатывания события мыши.
MouseEvent.mozInputSource Нестандартный Только для чтения: Тип устройства, сгенерировавшего событие (одно из MOZ_SOURCE_* констант). Это позволяет, например, определить, было ли событие мыши сгенерировано фактической мышью или событием касания (что может повлиять на точность интерпретации координат, связанных с событием).
MouseEvent.webkitForce Нестандартный Только для чтения: Сила нажатия при щелчке.
MouseEvent.x Только для чтения: Псевдоним для MouseEvent.clientX.
MouseEvent.y Только для чтения: Псевдоним для MouseEvent.clientY.

Примеры

Следующий пример использует события mousedown, mousemove, и mouseup для того, чтобы позволить пользователю рисовать на HTML-элементе canvas. Его функциональность проста: толщина линии установлена в 1, а цвет всегда черный.

При загрузке страницы создаются константы myPics и context для хранения ссылки на холст и 2d контекст, которые мы будем использовать для рисования.

Рисование начинается при срабатывании события mousedown. Сначала мы сохраняем координаты x и y указателя мыши в переменные x и y, а затем устанавливаем isDrawing в true.

По мере перемещения мыши по странице срабатывает событие mousemove. Если isDrawing равно true, обработчик событий вызывает функцию drawLine для рисования линии от сохранённых значений x и y до текущего положения.

После возвращения функции drawLine() мы корректируем координаты и сохраняем их в x и y.

Событие mouseup рисует последний отрезок линии, устанавливает x и y в 0, и останавливает дальнейшее рисование, установив isDrawing в 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();
}

Результат

Спецификации

Спецификация
События пользовательского интерфейса # event-type-mousemove
HTML # handler-onmousemove

Совместимость с браузерами

	Десктоп					Мобильные
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`mousemove_event`	2	12	6	11.6	4	18	6	12.1	3.2	1.0	≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/mousemove_event