Клик

Для пользователя клик — простое действие, а для браузера это цепочка событий. Сначала приходят pointerdown и mousedown, потом pointerup и mouseup, и только после этого — click. Событие возникает, если кнопку нажали и отпустили над одним и тем же элементом. Двойной клик дополнительно порождает dblclick, а правая кнопка вызывает contextmenu.

Важно, что click давно не означает «мышь». Браузер генерирует его и после тапа на сенсорном экране, и при нажатии Enter или пробела на сфокусированной кнопке. Поэтому обработчик клика на настоящей кнопке работает для всех способов ввода сразу. Раньше мобильные браузеры выжидали около 300 миллисекунд после тапа, проверяя, не будет ли двойного касания для зума. В современных браузерах этой задержки нет, если в странице задан meta viewport с width=device-width.

Пример: один обработчик на весь каталог

В каталоге интернет-магазина десятки кнопок «В корзину», а часть товаров подгружается позже. Вместо обработчика на каждой кнопке удобнее слушать клики на документе и проверять, откуда они пришли — это называется делегированием событий:

document.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-add-to-cart]');
  if (!btn) return;
  btn.disabled = true;
  addToCart(btn.dataset.productId)
    .finally(() => { btn.disabled = false; });
});

Блокировка кнопки на время запроса защищает от повторных кликов: нетерпеливый покупатель иначе добавит товар трижды.

Частые ошибки

• Обработчик клика повешен на div или span. Мышью работает, а с клавиатуры до элемента не добраться: нет фокуса и реакции на Enter. Для действий нужна кнопка.
• Слишком маленькая область клика: иконка 16×16 пикселей на телефоне превращается в лотерею.
• Действие висит только на mouseover или dblclick, которых на сенсорных экранах фактически нет.
• Вызов preventDefault() на ссылках без нужды ломает открытие в новой вкладке.

Клики по ключевым кнопкам — «Оформить заказ», «Позвонить» — часто отправляют в системы аналитики как цели, чтобы понимать, где посетители останавливаются.