dblclick

The event of double-clicking on an HTML element occurs when a user clicks on one element twice within a short period of time. The time interval between clicks must be small; otherwise, the browser interprets it not as a dblclick, but as several separate click events.

You can subscribe to the dblclick event and inform the user, for example:

        
          
          document.addEventListener('dblclick', event => {  alert('A double click has been registered on the page!')})
          document.addEventListener('dblclick', event => {
  alert('A double click has been registered on the page!')
})

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You can also track double clicks on any elements on the page:

        
          
          const card = document.querySelector('.card')// Set up a handler for the double-click eventcard.addEventListener('dblclick', function () {  alert('You double-clicked on the card!')})
          const card = document.querySelector('.card')

// Set up a handler for the double-click event
card.addEventListener('dblclick', function () {
  alert('You double-clicked on the card!')
})

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You can pass the event object to the handler function, which contains fields with information about the click, for example:

• target — reference to the target DOM element on which the event occurred.
• type — type of event.

To access the event object, the handler function must accept it as a parameter:

        
          
          card.addEventListener('dblclick', function (event) {  alert(event.target.classList)  // Displays the name of the class of the element  // that was double-clicked})
          card.addEventListener('dblclick', function (event) {
  alert(event.target.classList)
  // Displays the name of the class of the element
  // that was double-clicked
})

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

In the example below, double-clicking on the card changes its size:

        
          
          const card = document.querySelector('.card')card.addEventListener('dblclick', function () {  // The modifier increases the size of the card  card.classList.toggle('card_enlarged')})
          const card = document.querySelector('.card')

card.addEventListener('dblclick', function () {
  // The modifier increases the size of the card
  card.classList.toggle('card_enlarged')
})

        
        
          
            
            Copy
            Copied
            Failed to copy