Элемент: событие клика

Базовая линия Широко поддерживается *

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

* Некоторые части этой функции могут иметь различный уровень поддержки.

Элемент получает событие click при наступлении одного из следующих условий:

Нажатие и отпускание кнопки указательного устройства (например, основной кнопки мыши) при наведении указателя внутри элемента.
Выполнение жеста касания на элементе.
Любая пользовательская интеракция, эквивалентная клику, например, нажатие клавиши Space или Enter при фокусе на элементе. Обратите внимание, что это относится только к элементам с обработчиком событий по умолчанию, и поэтому не относится к другим элементам, которые были сделаны фокусируемыми путём установки атрибута tabindex.

Если кнопка нажата на одном элементе, а указатель перемещается за пределы элемента до отпускания кнопки, событие генерируется на самом конкретном предковом элементе, который содержал оба элемента.

click генерируется после того, как сработают события mousedown и mouseup в указанном порядке.

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

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика событий.

addEventListener("click", (event) => {});

onclick = (event) => {};

Тип события

Объект PointerEvent. Наследуется от MouseEvent.

Примечание: В предыдущих версиях спецификации тип события для этого события был MouseEvent. См. совместимость с браузерами для получения дополнительной информации.

Свойства события

Этот интерфейс наследует свойства от MouseEvent и Event.

PointerEvent.altitudeAngle Только для чтения Экспериментально: Представляет угол между осью датчика (указателя или стилуса) и плоскостью X-Y экрана устройства.
PointerEvent.azimuthAngle Только для чтения Экспериментально: Представляет угол между плоскостью Y-Z и плоскостью, содержащей ось датчика (указателя или стилуса) и ось Y.
PointerEvent.pointerId Только для чтения: Уникальный идентификатор указателя, вызвавшего событие.
PointerEvent.width Только для чтения: Ширина (величина по оси X) в пикселях CSS геометрии контакта указателя.
PointerEvent.height Только для чтения: Высота (величина по оси Y) в пикселях CSS геометрии контакта указателя.
PointerEvent.pressure Только для чтения: Нормализованное давление ввода указателя в диапазоне от 0 до 1, где 0 и 1 представляют минимальное и максимальное давление, соответственно, которое может обнаружить оборудование.
PointerEvent.tangentialPressure Только для чтения: Нормализованное касательное давление ввода указателя (также известное как боковое давление или напряжение цилиндра) в диапазоне от -1 до 1, где 0 — нейтральное положение управления.
PointerEvent.tiltX Только для чтения: Угол плоскости (в градусах, в диапазоне от -90 до 90) между плоскостью Y-Z и плоскостью, содержащей ось указателя (например, стилуса пера) и ось Y.
PointerEvent.tiltY Только для чтения: Угол плоскости (в градусах, в диапазоне от -90 до 90) между плоскостью X-Z и плоскостью, содержащей ось указателя (например, стилуса пера) и ось X.
PointerEvent.twist Только для чтения: Поворотный момент указателя (например, стилуса пера) по часовой стрелке вокруг его основной оси в градусах, со значением в диапазоне от 0 до 359.
PointerEvent.pointerType Только для чтения: Указывает тип устройства, вызвавшего событие (мышь, перо, сенсорный экран и т. д.).
PointerEvent.isPrimary Только для чтения: Указывает, представляет ли указатель основной указатель данного типа указателя.

Примечания по использованию

Объект PointerEvent, переданный в обработчик событий click, имеет свойство detail, установленное в количестве кликов по элементу target. Другими словами, detail будет равно 2 для двойного щелчка, 3 для тройного и так далее. Этот счётчик сбрасывается после короткого интервала без кликов; конкретное время интервала может варьироваться в разных браузерах и платформах. Интервал также может зависеть от пользовательских предпочтений; например, параметры доступности могут увеличить этот интервал, чтобы упростить выполнение нескольких кликов с адаптивными интерфейсами.

Примеры

Этот пример отображает количество последовательных кликов по кнопке <button>.

HTML

<button>Click</button>

JavaScript

const button = document.querySelector("button");

button.addEventListener("click", (event) => {
  button.textContent = `Click count: ${event.detail}`;
});

Результат

Попробуйте быстро и многократно нажимать на кнопку, чтобы увеличить количество кликов. Если вы сделаете паузу между кликами, счётчик сбросится.

Спецификации

Спецификация
UI Events # event-type-click
HTML # handler-onclick

Совместимость с браузерами

	Рабочий стол					Мобильный телефон
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`click_event`	1	12	6 Начиная с Firefox 68, Firefox больше не неправильно отправляет событие `click` для кнопок, кроме основной кнопки мыши; ранее это случалось в некоторых ситуациях. Пример: двойной щелчок по ссылке отправлял событие `click` в элемент `<html>` документа.	11.6	3	18	6	12.1	1	1.0	4.4
`type_pointerevent`	92	92	Нет	78	Нет	92	Нет	65	Нет	16.0	92

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event