Движение указателя мыши

Событие mousemove - это движение указателя мыши. Когда пользователь перемещает указатель, это событие срабатывает многократно. Частота возникнновения события бывает разная и зависит от разных факторов: типа устройства, настроек операционной системы и других. Объект этого события имеет свойства, содержащие координаты указателя мыши, такие же, как у объекта click.

В прошлой теме мы создавали блок, в котором определялись координаты при клике. Создадим такой же блок, но теперь будут определяться координаты при движении указателя мыши внутри блока:

HTML код:

<div style="width: 500px; height: 400px; border: 1px solid Red">
</div>

JavaScript:

let div = document.querySelector('div');
div.onmousemove = function(event)
{
  div.innerHTML = 'Координаты: ' +
  event.clientY + ' ' + event.clientX;
};

В примере выводятся только координаты относительно окна браузера. Вы можете добавить вывод координат относительно документа. Напомню, что они содержатся в свойствах pageX и pageY.

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