Double Click Demo

Double-click the button or the box. Both controls preserve the original demo behavior.

Refresh and Try again
Return to Tutorial on Double Click

Complete JavaScript Source

const button = document.getElementById('doubleButton');
const box = document.getElementById('box');

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

button.addEventListener('dblclick', showDoubleClick);
box.addEventListener('dblclick', showDoubleClick);

Complete HTML Source

<button id="doubleButton" type="button">Double Click</button>
<div id="box">Double click here</div>