Событие услышано снова… и снова… и снова!
Одним из самых болтливых событий, с которыми вам предстоит работать, является событие mousemove. Оно срабатывает огромное количество раз во время движения курсора по элементу, в котором вы прослушиваете событие mousemove:
Далее приведен пример использования mousemove в коде:
let button = document.querySelector("#myButton");
button.addEventListener("mousemove", mouseIsMoving, false);
function mouseIsMoving(e) {
console.log("Mouse is on the run!");
}
Ваш браузер контролирует частоту, с которой срабатывает событие mousemove, при этом оно срабатывает, когда курсор мыши смещается даже всего на один пиксель. Это событие хорошо для многих интерактивных сценариев, в которых, к примеру, важно отслеживать текущую позицию курсора.
Контекстное меню
Последним связанным с мышью событием, которое мы рассмотрим, является contextmenu. Как вам наверняка хорошо известно, когда вы по обыкновению кликаете правой кнопкой мыши в различных приложениях, появляется меню:
Оно называется контекстное меню. Как раз перед появлением этого меню срабатывает событие contextmenu.
Честно говоря, есть всего одна весомая причина для прослушивания этого события. Она связана с предотвращением появления этого меню при правом клике, использовании связанной с ним клавиши клавиатуры или просто горячей клавиши.
Вот пример того, как вы можете предотвратить встроенное поведение, при котором появляется контекстное меню:
document.addEventListener("contextmenu", hideMenu, false);
function hideMenu(e) {
e. preventDefault();
}
Метод preventDefault в любом типе Event предотвращает любое его встроенное действие. Так как событие contextmenu срабатывает до появления меню, вызов preventDefault гарантирует, что оно показано не будет. Да, я уже второй раз упоминаю это свойство, но вы же знаете, что мне платят за количество символов (ха-ха).
Учитывая все сказанное, я могу придумать множество альтернативных способов для предотвращения появления контекстного меню без помощи событий, но пока что дела обстоят именно так.
Свойства MouseEvent
Давайте перейдем к конкретике. Все события мыши, которые мы видели до сих пор, основаны на MouseEvent. Обычно эту разновидность фактоида[4] вы храните исключительно для торжественных случаев и игнорируете. Тем не менее в данном случае эта деталь для нас важна, так как MouseEvent несет в себе набор свойств, упрощающих работу с мышью. Давайте на них посмотрим.
Глобальная позиция мыши
Свойства screenX и screenY возвращают расстояние, на котором находится курсор мыши от левого верхнего угла основного монитора:
Вот очень простой пример использования screenX и screenY:
document.addEventListener("mousemove", mouseMoving, false);
function mouseMoving(e) {
console.log(e.screenX + " " + e.screenY);
}
При этом не важно, какие еще действия с отступами, заполнением или сдвигами макета производятся на странице. Возвращаемые значения всегда будут отражать расстояние между текущим положением курсора и левым верхним углом основного монитора.
Позиция курсора мыши в браузере
Свойства clientX и clientY возвращают позиции x и y курсора относительно левого верхнего угла браузера (технически его области просмотра):
Код в данном случае достаточно прост:
let button = document.querySelector("#myButton");
document.addEventListener("mousemove", mouseMoving, false);
function mouseMoving(e) {
console.log(e.clientX + " " + e.clientY);
}
Вы просто вызываете свойства clientX и clientY аргумента события, переданного в обработчик события, чтобы получить их значения.
Определение нажатой кнопки
Мыши зачастую оборудованы несколькими кнопками или предоставляют возможность их имитировать. Наиболее распространенная конфигурация состоит из левой, правой и средней (обычно это нажатие на колесико мыши) кнопок. Для определения, какая из кнопок была нажата, существует свойство button. Это свойство возвращает 0 при нажатии левой кнопки, 1 — при нажатии средней и 2 — при нажатии правой:
4
Фактˆоид — недостоверное или ложное утверждение, которое облекается в форму достоверного и выдается за достоверное. —