LearnJS

Событие click в JavaScript

Событие click сообщает, что пользователь активировал элемент. Обычно это происходит при щелчке мышью или касании экрана. Но click не привязан только к указателю: нативную кнопку можно активировать и с клавиатуры.

Поэтому click подходит для обычного действия в интерфейсе: открыть панель, добавить товар в корзину, переключить настройку или запустить сохранение.

Что означает click

Указатель создаёт несколько событий: нажатие, движение и отпускание. click возникает после успешной активации элемента. Для обычной кнопки неважно, нажал пользователь её мышью, пальцем или клавиатурой - обработчик click получит действие в каждом подходящем случае.

У кнопки с фокусом клавиши Enter и Space вызывают её обычную активацию. У ссылки с href для этого используется Enter. Браузер уже знает это поведение, поэтому не нужно отдельно добавлять обработчики клавиатуры для простой кнопки или ссылки.

Кнопка или ссылка

Выбирайте HTML-элемент по смыслу действия:

  • <button> - запускает действие на текущей странице: открывает меню, отправляет данные, изменяет состояние интерфейса;
  • <a href> - ведёт пользователя на другой адрес, к разделу страницы или к файлу.

Не стоит делать интерактивный элемент из div и назначать ему click. Такой элемент не получает фокус по Tab и не имеет привычной поддержки клавиатуры. Нативная кнопка уже решает эти задачи и понятна вспомогательным технологиям.

У кнопки внутри формы укажите type=“button”, если она не должна отправлять форму. Иначе браузер посчитает её кнопкой отправки по умолчанию.

Пример добавления в корзину

<button class="add-to-cart" type="button">
  Добавить в корзину
</button>

<p class="cart-status" aria-live="polite">
  В корзине товаров: 0
</p>
const addToCartButton = document.querySelector('.add-to-cart');
const cartStatus = document.querySelector('.cart-status');
let itemsInCart = 0;

addToCartButton.addEventListener('click', function () {
  itemsInCart += 1;
  cartStatus.textContent = 'В корзине товаров: ' + itemsInCart;
});

После активации кнопки обработчик увеличит счётчик и обновит текст. Благодаря aria-live=“polite” программа чтения с экрана сообщит новое значение пользователю, не прерывая его работу.

Этот же код запустится при клике мышью, касании и активации кнопки с клавиатуры. Не нужно писать три разных обработчика.

Когда click не подходит

click нужен для завершённого действия. Если важен сам жест, выбирайте другое событие:

  • pointerdown, pointermove и pointerup - для рисования, перетаскивания, ползунка или изменения размера блока;
  • input и change - когда нужно отследить новое значение поля формы.

Не запускайте одно и то же действие и на pointerdown, и на click. При обычном взаимодействии оба события могут произойти, поэтому код выполнится дважды.

Раскрывающийся блок без JavaScript

Если нужно только показать или скрыть дополнительный текст, обработчик click иногда не нужен. Элементы details и summary уже умеют это делать сами и поддерживают клавиатуру.

<details>
  <summary>Как вернуть товар?</summary>
  <p>Товар можно вернуть в течение 14 дней после получения.</p>
</details>

Браузер сам меняет состояние блока при активации summary. Если JavaScript должен реагировать именно на изменение состояния, слушайте событие toggle у details, а не управляйте раскрытием вручную через click.

Итого

click - событие активации элемента, а не только щелчок мышью. Для действий используйте нативные кнопки, для переходов - ссылки. Это даёт пользователю доступ к интерфейсу с мышью, касанием и клавиатурой без дополнительных обработчиков.