skip to main content

Element.click

js

Кратко 🔗

Событие клика на HTML элементе. Когда юзер кликает мышкой по странице, браузер определяет, на каком элементе произошел клик и создает событие click.

На события можно подписаться и выполнять JavaScript код, когда событие произошло.

Как пишется 🔗

Подписаться на все клики на странице:

document.addEventListener("click", function () {
alert("Вы клинкули по странице!")
})

Подписаться только на клики по кнопке (она должна быть на странице):

let button = document.getElementsByTagName("button")[0] // получаем кнопку

// навешиваем обработчик на событие клик
button.addEventListener("click", function () {
alert("Вы кликнули по кнопке!")
})

Как понять 🔗

Подробнее о механизме событий читай в статье «События».

В функцию-обработчик так же передается объект события, который содержит дополнительную информацию о клике. Самые полезные свойства:

  • detail — количество кликов, которые произвел пользователь. 1 — для одиночного клика, 2 — для двойного и так далее.
  • button — кнопка, которой кликнул пользователь. 0 — левая кнопка, 2 — правая, 1 — средняя кнопка (обычно это нажатие на колесо).

Чтобы получить доступ к объекту события, функция-обработчик должна принимать на вход параметр:

button.addEventListener("click", function (event) {
alert(event.button) // напечатает номер нажатой кнопки мыши
})

Пример, использующий эти свойства:

See the Pen Свойства события click by Nikolai Lopin (@Lopinopulos) on CodePen.

В работе 🔗

Николай,

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

🛠 Можно слушать клики по любым элементам: div, p, button — браузеры это умеют.

🛠 Некоторые мобильные браузеры (например, Safari Mobile) создают события click только на интерактивных элементах — button, a, img, input и так далее.

Николай,