JavaScript Double-Click Event (dblclick)

The JavaScript dblclick event runs after a user rapidly activates the same element twice with the primary pointing-device button. Use addEventListener('dblclick', ...) for modern event handling.

element.addEventListener('dblclick', (event) => {
  // code to run after a double click
});

Demo of double click Demo of single and double click

Basic Double-Click Example Top ↑

The original plus2net demo lets users double-click either a button or a box to change the message and background. The facility is preserved, while inline ondblclick attributes are replaced with event listeners.

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>

Using Single Click and Double Click Together Top ↑

A double click is normally preceded by click events. If single-click and double-click actions do different things, delay the single-click action briefly so it does not visibly run just before the double-click action.

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>

Example 1: Changing the Style of Multiple Elements Top ↑

Open the multiple-element style demo. Double-clicking the instruction toggles a highlight class on the three example paragraphs.

const trigger = document.getElementById('highlightTrigger');
const paragraphs = document.querySelectorAll('.highlightTarget');
trigger.addEventListener('dblclick', () => {
  paragraphs.forEach((paragraph) => paragraph.classList.toggle('highlight'));
});

<p id="highlightTrigger">Double-click here to highlight the paragraphs below.</p>
<p class="highlightTarget">Paragraph 1</p>
<p class="highlightTarget">Paragraph 2</p>
<p class="highlightTarget">Paragraph 3</p>

Example 2: Confirming Actions Before Proceeding Top ↑

Open the confirmation demo. This preserves the original confirm/cancel behavior. For production interfaces, provide a normal button activation path as well because a double click alone is not keyboard-friendly.

const deleteButton = document.getElementById('deleteButton');
deleteButton.addEventListener('dblclick', () => {
  const confirmed = confirm('Are you sure you want to delete this item?');
  alert(confirmed ? 'Item deleted successfully!' : 'Action canceled.');
});

Example 3: Dynamic Addition of Double-Click Events Top ↑

Open the dynamic list demo. A normal click adds a list item; double-clicking that item removes it.

const addButton = document.getElementById('addItem');
const list = document.getElementById('dynamicList');
addButton.addEventListener('click', () => {
  const item = document.createElement('li');
  item.textContent = 'Double-click to remove me';
  item.addEventListener('dblclick', () => item.remove());
  list.appendChild(item);
});

Example 4: Highlighting Selected Text Top ↑

Open the selected-text demo. The updated example checks that a non-empty selection and range exist before attempting to wrap the selected text.

const selectionText = document.getElementById('selectionText');
selectionText.addEventListener('dblclick', () => {
  const selection = window.getSelection();
  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
  const range = selection.getRangeAt(0);
  const mark = document.createElement('mark');
  try {
    range.surroundContents(mark);
    selection.removeAllRanges();
  } catch (error) {
    // A range crossing incompatible nodes cannot be surrounded directly.
  }
});

Example 5: Restricting Double Click to a Specific Area Top ↑

Open the coordinate demo. Double-clicking inside the bordered box reports the pointer position relative to that element.

const area = document.getElementById('coordinateArea');
const output = document.getElementById('coordinateOutput');
area.addEventListener('dblclick', (event) => {
  output.textContent = `Coordinates: X = ${event.offsetX}, Y = ${event.offsetY}`;
});

Event Sequence and Practical Cautions Top ↑

A dblclick occurs after two click activations, so combining separate single-click and double-click meanings can create timing ambiguity. Use a normal click for primary actions where possible and reserve dblclick for optional mouse-oriented shortcuts or demonstrations.

← Event Handling onKeyPress event → Textarea onClick event → onKeyDown event →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: