JavaScript HTML DOM Events: dblclick

The dblclick event fires when a user quickly double-clicks an element. Since the browser usually also fires two click events, a short time delay is often used to distinguish actions: if a dblclick occurs during this time, we cancel the "single‑click" action.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dblclick</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            max-width: 600px;
            margin: 0 auto;
        }
        
        #p {
            padding: 20px;
            border: 2px solid #ccc;
            border-radius: 8px;
            cursor: pointer;
            user-select: none;
            text-align: center;
            font-size: 18px;
            background-color: #f9f9f9;
            color: #333333;
            transition: all 0.3s ease;
        }
        
        #p:hover {
            background-color: #e8f4f8;
            border-color: #4CAF50;
        }
    </style>
</head>
<body>
    <p id="p" ondblclick="handleDoubleClick()" onmouseleave="resetText()">Double click</p>

    <script>
        function handleDoubleClick() {
            document.getElementById("p").innerHTML = "You double-clicked on the HTML element.";
        }
        
        function resetText() {
            document.getElementById("p").innerHTML = "Double click";
        }
    </script>
</body>
</html>

RESULT

Interactive Example

The interactive example below demonstrates the use of the dblclick event and the difference between a single click (click) and a double click (dblclick). Since the browser usually fires two click events on a double click, the example uses a 250 ms time delay to distinguish actions: if a dblclick event occurs during this time, the "single-click" action is canceled. The event object (event) contains the detail property that shows the click sequence, as well as the clientX and clientY coordinates. The element also supports keyboard accessibility (Enter/Space), where a "single-click" action is triggered. The log displays all events in real-time.

Click once for "single‑click" action, double click for "dblclick" action.

Hint: a double click usually also fires two click events. Below, a short delay is used to cancel the "single‑click" if a dblclick occurs.