базовый курс

ГРУППА КУРСА

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

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

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

HTML код:

+
1
2
3
4
5
6
7
<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
8
9
<div style="width: 500px; height: 400px; border: 1px solid Red">
</div>

JavaScript:

11
12
13
14
15
16
var div=document.querySelector('div');
div.onmousemove = function (event)
  {
  div.innerHTML='Координаты: '+
  event.clientY+' '+event.clientX;
  };

В примере выводятся только координаты относительно окна браузера. Вы можете добавить вывод координат относительно документа. Только в нашем примере эти координаты будут совпадать. Для того, чтобы они отличались, блок долден быть смещён, например, из-за предыдущего элемента страницы.

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