dblclick

Событие двойного клика на HTML-элементе происходит, когда пользователь в течение короткого времени дважды кликает один элемент. Временной промежуток между кликами должен быть небольшим, иначе браузер интерпретирует его не как dblclick, а как несколько отдельных click-событий.

На событие dblclick можно подписаться и информировать пользователя, например:

        
          
          document.addEventListener('dblclick', event => {  alert('На странице зафиксирован двойной клик!')})
          document.addEventListener('dblclick', event => {
  alert('На странице зафиксирован двойной клик!')
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Также можно отслеживать двойные клики по любым элементам на странице:

        
          
          const card = document.querySelector('.card')// Установим обработчик на событие двойного кликаcard.addEventListener('dblclick', function () {  alert('Вы дважды кликнули по карточке!')})
          const card = document.querySelector('.card')

// Установим обработчик на событие двойного клика
card.addEventListener('dblclick', function () {
  alert('Вы дважды кликнули по карточке!')
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

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

• target — ссылка на целевой DOM-элемент, на котором произошло событие.
• type — тип события.

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

        
          
          card.addEventListener('dblclick', function (event) {  alert(event.target.classList)  // Отображает название класса элемента,  // по которому дважды кликнули})
          card.addEventListener('dblclick', function (event) {
  alert(event.target.classList)
  // Отображает название класса элемента,
  // по которому дважды кликнули
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В примере ниже двойной клик по карточке меняет её размер:

        
          
          const card = document.querySelector('.card')card.addEventListener('dblclick', function () {  // Модификатор увеличивает размер карточки  card.classList.toggle('card_enlarged')})
          const card = document.querySelector('.card')

card.addEventListener('dblclick', function () {
  // Модификатор увеличивает размер карточки
  card.classList.toggle('card_enlarged')
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать