Single Click and Double Click Demo

Single-click or double-click the button or box. The short delay prevents the single-click message from replacing the double-click result.

Refresh and Try again
Tutorial on Double Click

Complete JavaScript Source

const actionButton = document.getElementById('actionButton');
const actionBox = document.getElementById('actionBox');
let singleClickTimer;

function showSingleClick() {
  actionBox.textContent = 'This is single click';
  actionBox.style.background = '#ccffff';
}

function showDoubleClick() {
  clearTimeout(singleClickTimer);
  actionBox.textContent = 'This is double click';
  actionBox.style.background = '#ffccff';
}

function handleClick() {
  clearTimeout(singleClickTimer);
  singleClickTimer = setTimeout(showSingleClick, 250);
}

[actionButton, actionBox].forEach((element) => {
  element.addEventListener('click', handleClick);
  element.addEventListener('dblclick', showDoubleClick);
});

Complete HTML Source

<button id="actionButton" type="button">Click or Double Click</button>
<div id="actionBox">Single click or double click here</div>