JavaScript ondblclick Event

Why ondblclick ?

The JavaScript ondblclick property is mounted on the onclick property. The onclick feature works only once. The ondblclick feature works twice after being clicked repeatedly.

Syntax:

HTML Attribute	<element ondblclick = “handler(event)“>
Event Property	object.ondblclick = handler;
attachEvent Method	object.attachEvent(“ondblclick“, handler)
addEventListener Method	object.addEventListener(“dblclick“, handler, useCapture)

ondblclick Examples

Example 1

ondblclick example 1

<body>

    <button ondblclick="dblFunction()">CLICK</button>

    <script>

        function dblFunction() {
            alert("The ondblclick property worked successfully.")
        }

    </script>
</body>

Example 2

ondblclick example 2

<body>

    <button ondblclick="dblFunction()">CLICK</button>

    <script>

        document.getElementById("but").ondblclick = function () {
            dblFunction();
        }

        function dblFunction() {
            alert("The ondblclick property worked successfully.")
        }
    </script>
</body>

Example 3

ondblclick example 3

<body>

    <button id="but">CLICK</button>

    <script>

        document.getElementById("but").addEventListener("dblclick", dblFunction)

        function dblFunction() {
            alert("The ondblclick property worked successfully.")
        }
    </script>
</body>

Example 4

ondblclick example 4

<body>

    <button id="but">CLICK</button>

    <script>

        document.getElementById("but").ondblclick =  function(){
            alert("The ondblclick property worked successfully.")
        }
    </script>
</body>

Example 5

ondblclick example 5

<body id="win">

    <button id="red">RED</button>
    <button id="blue">BLUE</button>
    <button id="green">GREEN</button>
    <button id="orange">ORANGE</button>
    <button id="yellow">YELLOW</button>

    <script>

        document.getElementById("red").ondblclick = function () {
            document.getElementById("win").style.background = "red"
        }
        document.getElementById("blue").ondblclick = function () {
            document.getElementById("win").style.background = "blue"
        }
        document.getElementById("green").ondblclick = function () {
            document.getElementById("win").style.background = "green"
        }
        document.getElementById("orange").ondblclick = function () {
            document.getElementById("win").style.background = "orange"
        }
        document.getElementById("yellow").ondblclick = function () {
            document.getElementById("win").style.background = "yellow"
        }

    </script>
</body>

Example 6

ondblclick example 6

<body>

    <div id="box"></div>
    <button id="left">LEFT</button>
    <button id="right">RIGHT</button>
    <button id="up">UP</button>
    <button id="down">DOWN</button>

    <script>

        let left = document.getElementById("left"),
            right = document.getElementById("right"),
            up = document.getElementById("up"),
            down = document.getElementById("down"),
            box = document.getElementById("box");

        left.ondblclick = function () {
            box.style.transform = "translateX(-80px)"
        }
        right.ondblclick = function () {
            box.style.transform = "translateX(80px)"
        }
        up.ondblclick = function () {
            box.style.transform = "translateY(80px)"
        }
        down.ondblclick = function () {
            box.style.transform = "translateY(-80px)"
        }

    </script>
</body>

Example 7

ondblclick example 7

<body>

    <h2 id="txt">JAVASCRIPT</h2>
    <button ondblclick="family1()">1</button>
    <button ondblclick="family2()">2</button>
    <button ondblclick="family3()">3</button>
    <button ondblclick="family4()">4</button>
    <button ondblclick="family5()">5</button>

    <script>

        let txt = document.getElementById("txt");

        function family1() {
            txt.style.fontFamily = "arial"
        }
        function family2() {
            txt.style.fontFamily = "Verdana"
        }
        function family3() {
            txt.style.fontFamily = "Andalus"
        }
        function family4() {
            txt.style.fontFamily = "AR CENA"
        }
        function family5() {
            txt.style.fontFamily = "Broadway"
        }

    </script>
</body>