HTML ondblclick Attribute

Introduction

The ondblclick attribute is an inline event handler that runs JavaScript when the dblclick event fires. That happens when the user double-clicks an element with a mouse or trackpad—two quick clicks in the same spot. Use it for desktop-style actions like opening a file, zooming an image, or renaming an item on double-click. A double-click also fires two click events first, then one dblclick. The event bubbles. For production sites, prefer addEventListener("dblclick", …) over inline handlers. On touch devices, double-click is less intuitive—offer a single-click alternative when possible.

What You’ll Learn

Purpose of ondblclick Attribute

The primary purpose of ondblclick is to define what happens when a user double-clicks an element. Common uses include opening a document, zooming an image, entering edit mode on a list item, or selecting a word in a custom text area. It connects a deliberate two-click gesture to JavaScript behavior without a full page reload.

Do not confuse ondblclick with onclick. A single click runs click; a double click runs click twice, then dblclick. Use onclick for primary actions and reserve ondblclick for secondary or power-user shortcuts. Avoid alert() in handlers—update visible status text instead.

📝 Syntax

Set ondblclick on any element or assign element.ondblclick:

<script>

  function handleDoubleClick() {

    document.getElementById("status").textContent = "Double-clicked!";

  }

</script>



<button type="button" ondblclick="handleDoubleClick()">Double-click me</button>

<p id="status"></p>

Syntax Rules

• Value is JavaScript code executed when the element receives a double-click.
• Works on almost any element: button, div, p, img, etc.
• A double-click fires two click events, then one dblclick.
• JavaScript: element.ondblclick = function() { … }.
• Modern alternative: element.addEventListener("dblclick", handler).
• The dblclick event bubbles — you can delegate on a parent container.

💎 Values

The ondblclick attribute accepts a string of JavaScript code:

• ondblclick="handleDoubleClick()" — Call a named function.
• ondblclick="this.classList.toggle('active')" — Inline statement on the element.
• JavaScript: box.ondblclick = () => { … } assigns the handler.

const card = document.getElementById("card");

card.addEventListener("dblclick", () => {

  card.classList.toggle("expanded");

});

document.getElementById("card").ondblclick = function () {

  console.log("Double-clicked");

};

Applicable Elements

ondblclick vs onclick vs onmousedown

Examples Gallery

Inline ondblclick on a button, addEventListener dblclick, and comparing click vs double-click on the same element.

<button type="button" ondblclick="handleDoubleClick()">Double-click me</button>

<p id="msg"></p>



<script>

  function handleDoubleClick() {

    document.getElementById("msg").textContent = "Button double-clicked!";

  }

</script>

<script>

  document.getElementById("dynamicElement").ondblclick = function () {

    console.log("Dynamic element double-clicked!");

  };



  // Or preferred form:

  document.getElementById("dynamicElement").addEventListener("dblclick", handler);

</script>

box.addEventListener("click", () => {

  log("click");

});



box.addEventListener("dblclick", () => {

  log("dblclick");

});

♿ Accessibility

• Double-click is not keyboard-native — There is no standard keyboard equivalent to double-click. Do not hide primary actions behind ondblclick alone.
• Offer single-click alternatives — On touch devices, double-click is hard to discover. Provide buttons or menus for the same action.
• Avoid alert() on dblclick — Inline status text or visible UI updates are more accessible than modal alerts.
• Use semantic elements — Prefer <button type="button"> over <div ondblclick> when the action is a control.
• Focus visible — Do not remove focus outlines on interactive elements; users need to see which control is active.

💡 Best Practices