click

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

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

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

Как пишется

Секция статьи "Как пишется"

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

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

        
        
          
        
      

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

        
          
          const button = document.getElementsByTagName('button')[0]// навешиваем обработчик на событие кликbutton.addEventListener('click', function () {  alert('Вы кликнули по кнопке!')})
          const button = document.getElementsByTagName('button')[0]

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

        
        
          
        
      

Как понять

Секция статьи "Как понять"

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

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

  • detail — количество кликов, которые произвёл пользователь. 1 — для одиночного клика, 2 — для двойного и так далее.
  • view — возвращает объект window, в котором произошло событие.

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

        
          
          button.addEventListener('click', function (event) {  alert(event.detail) // напечатает количество кликов})
          button.addEventListener('click', function (event) {
  alert(event.detail) // напечатает количество кликов
})

        
        
          
        
      

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

Открыть демо в новой вкладке

На практике

Секция статьи "На практике"

Николай Лопин советует

Секция статьи "Николай Лопин советует"

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

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

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

🛠 Мобильные браузеры так же порождают события touch.