JavaScript HTML DOM Dogodki: dblclick

Dogodek dblclick se sproži, ko uporabnik hitro dvakrat klikne element. Ker brskalnik običajno sproži tudi dva click dogodka, je za ločevanje dejanj pogosto uporabljen kratek časovni zamik: če v tem času pride do dblclick, prekličemo “single‑click” dejanje.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<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="dvojno()" onmouseleave="resetiraj()">Klikni dvakrat</p>

    <script>
        function dvojno() {
            document.getElementById("p").innerHTML = "Dvakrat si kliknil na HTML element.";
        }
        
        function resetiraj() {
            document.getElementById("p").innerHTML = "Klikni dvakrat";
        }
    </script>
</body>
</html>

REZULTAT

Interaktivni primer

Spodnji interaktivni primer prikazuje uporabo dblclick dogodka in razliko med enojnim (click) ter dvojnim klikom (dblclick). Ker brskalnik ob dvojnem kliku običajno sproži tudi dva click dogodka, primer uporablja časovni zamik 250 ms za ločevanje dejanj: če v tem času pride do dblclick dogodka, se "single-click" dejanje prekliče. Objekt dogodka (event) vsebuje lastnost detail, ki prikazuje zaporedje klikov, ter koordinate clientX in clientY. Element podpira tudi dostopnost s tipkovnico (Enter/Space), kjer se sproži "single-click" dejanje. Log izpisuje vse dogodke v realnem času.

Klikni enkrat za “single‑click” dejanje, dvojni klik za “dblclick” dejanje.

Namig: ob dvojnem kliku se običajno sprožita tudi dva click dogodka. Spodaj je uporabljen kratek zamik, s katerim “single‑click” prekličemo, če pride do dblclick.