Как узнать, что юзер кликнул. События мыши в JS

Мышь — один из самых привычных способов взаимодействия с веб-страницей, и JavaScript даёт разработчику полный набор инструментов, чтобы реагировать на действия пользователя. Мышиные события позволяют «слушать» клики, движения и даже прокрутку, создавая динамичные и удобные интерфейсы. Эти события существуют в браузерах очень давно и с января 2018 года находятся в статусе Widely Available в Baseline — значит, поддерживаются всеми современными браузерами.

Основные мышиные события

Вот самые часто используемые события:

• click — нажатие и отпускание кнопки мыши;
• dblclick — двойной клик;
• mousedown и mouseup — нажатие и отпускание кнопки;
• mousemove — движение курсора;
• mouseenter и mouseleave — вход курсора в область элемента и выход из неё;
• contextmenu — вызов контекстного меню (обычно правая кнопка мыши).

Простейший пример: обработка клика

<button id="myButton">Кликни меня</button>
<script>
  document.getElementById('myButton').addEventListener('click', () => {
    alert('Кнопка нажата!');
  });
</script>

Вот попробуйте.

Пример: двойной клик

<div id="dblBox">Двойной клик по мне</div>
<script>
  document.getElementById('dblBox').addEventListener('dblclick', () => {
    alert('Двойной клик сработал!');
  });
</script>

Пример: mousedown и mouseup

<div id="pressBox">Зажми и отпусти</div>
<script>
  const box = document.getElementById('pressBox');
  box.addEventListener('mousedown', () => box.style.backgroundColor = 'lightgreen');
  box.addEventListener('mouseup', () => box.style.backgroundColor = 'lightcoral');
</script>

Пример: отслеживание движения мыши

JavaScript позволяет даже динамически реагировать на перемещение курсора:

document.addEventListener('mousemove', event => {
  console.log(`Координаты: X=${event.clientX}, Y=${event.clientY}`);
});

Вот интерактивный пример:

Пример: mouseenter и mouseleave

<div id="hoverBox">Наведи и убери курсор</div>
<script>
  const hover = document.getElementById('hoverBox');
  hover.addEventListener('mouseenter', () => hover.style.backgroundColor = 'lightblue');
  hover.addEventListener('mouseleave', () => hover.style.backgroundColor = '');
</script>

Пример: contextmenu

<div id="contextBox">Правая кнопка мыши</div>
<script>
  document.getElementById('contextBox').addEventListener('contextmenu', e => {
    e.preventDefault();
    alert('Контекстное меню заблокировано!');
  });
</script>

Практика: drag-and-drop

На основе мышиных событий можно реализовать перетаскивание объектов. Браузеры предоставляют нативное Drag and Drop API, но многие интерфейсы строятся на «ручной» обработке mousedown, mousemove и mouseup. Это полезный навык для создания собственных виджетов.

Взаимодействие с интерфейсом мышью — основа интерактивности в вебе. От простого клика до сложных drag-and-drop интерфейсов, всё это строится на одних и тех же базовых событиях. Освоив их, вы сможете оживлять страницы и делать взаимодействие пользователя с интерфейсом более естественным и удобным.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.