click

Событие клика на 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.

+ Развернуть