JS властивість Event.mousemove

Загальний опис

Подія mousemove виникає щоразу, коли курсор миші рухається всередині елемента або в межах документу. Ця подія дуже корисна для відстеження координат курсора миші та використовується в таких сценаріях, як створення інтерактивних елементів, малювання на канвасі, або переміщення об’єктів по екрану.

Подія mousemove передає об'єкт події, який містить важливі властивості:

• clientX та clientY: координати курсора відносно вікна браузера.
• pageX та pageY: координати курсора відносно всієї сторінки (враховує прокрутку).
• target: елемент, над яким рухається миша.

Щоб працювати з mousemove, необхідно додати обробник події за допомогою методу addEventListener. Ось приклад:

document.addEventListener('mousemove', function(event) {
  console.log('Координати курсора:', event.clientX, event.clientY);
});

Цей код виводить координати курсора при кожному русі миші по документу. Однак важливо враховувати, що подія mousemove може викликатися дуже часто (навіть сотні разів на секунду), тому варто оптимізувати обробники для уникнення навантаження на систему.

У більш складних сценаріях подія mousemove використовується для динамічного оновлення позицій елементів на сторінці або для створення інтерактивних графічних інтерфейсів. Наприклад, малювання на полотні (canvas) часто реалізується через відстеження руху миші.

правити

Порада

Поєднуйте mousemove з іншими подіями, такими як mousedown та mouseup, для створення складних механізмів взаємодії, наприклад, перетягування об’єктів. Це дозволить відслідковувати рух миші тільки під час активного натискання кнопки.

автор: Bond правити

Порада

Для інтерактивних інтерфейсів, таких як малювання або ігри, mousemove можна використовувати для динамічного оновлення графіки в режимі реального часу. Однак слід використовувати оптимізовані методи малювання, щоб не перевантажувати браузер.

автор: Bond правити

Порада

Якщо потрібно зупинити обробку події, викликайте event.preventDefault() в обробнику події, щоб перешкодити виконанню стандартних дій браузера (наприклад, виділення тексту при натисканні і переміщенні миші).

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('mousemove', function(event) {
  // обробка події
});

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	66	57	11.1	53	16

Підтримка: мобільні переглядачі

Переглядач
	66	66	57	11.3

Підтримка: серверні переглядачі

Переглядач
	15.0.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<canvas id="myCanvas" width="300" height="150"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
let isDrawing = false;

canvas.addEventListener('mousedown', function() {
  isDrawing = true;
});

canvas.addEventListener('mouseup', function() {
  isDrawing = false;
  ctx.beginPath(); // Почати новий шлях
});

canvas.addEventListener('mousemove', function(event) {
  if (isDrawing) {
    ctx.lineWidth = 5;
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'black';

    ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
  }
});

document.addEventListener('mousemove', function(event) {
  const trail = document.createElement('div');
  trail.style.position = 'absolute';
  trail.style.width = '10px';
  trail.style.height = '10px';
  trail.style.backgroundColor = 'blue';
  trail.style.borderRadius = '50%';
  trail.style.left = event.pageX + 'px';
  trail.style.top = event.pageY + 'px';
  
  document.body.appendChild(trail);

  setTimeout(function() {
    trail.remove();
  }, 300);
});