How To Use Ondblclick Event In JavaScript With Example

Posted By Bajarangi soft , Posted On 29-09-2020

In Java script when the user double-clicks on an element that time event occurs or when user do double click user get alert message so today we are going to discuss how to get alert message or message on double click in java script.

How To Use Ondblclick Event In JavaScript With Example

The ondblclick event occurs when the user double-clicks on an element.

Ondblclick event can also use for below HTML tags:

All HTML elements, EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>.

Example(1)

            <h2 ondblclick="double_click()">Double-click this paragraph to trigger a function.</h2>
            <h2 id="demo1"></h2>  
<script>
    function double_click() {
        document.getElementById("demo1").innerHTML = "Hello World! Welcome to BajarangiSoft";
    }
</script>

In above example when a <h2> element is double-clicked you get message for specified element

Example(2)

           
            <h2 ondblclick="alert_double_click()">Double-click this paragraph to trigger a function.</h2>
            <h2 id="demo2"></h2>
<script>
    function alert_double_click() {
        alert("Hello World! Welcome to BajarangiSoft");
    }
</script>

In above example when a <h2> element is double-clicked you get alert message.

Example(3)

<h1 id="demo">do Double-click.</h1>

<script>
    document.getElementById("demo").ondblclick = function() {double_click()};

    function double_click() {
        alert("hi");
    }
</script>

In this above example uses the HTML DOM to assign an "ondblclick" event to a p element.

Example(4)

<h2 id="demo">do Double-click.</h2>

<script>
    document.getElementById("demo").addEventListener("dblclick", double_click);

    function double_click() {
        document.getElementById("demo").innerHTML = "I was double-clicked!";
    }
</script>

In this above example uses the addEventListener() method to attach a "dblclick" event to a p element.</h2>

Complete code for Use Ondblclick Event In JavaScript With Example

<!DOCTYPE html>
<html>
<head>
    <title>Use Ondblclick Event In JavaScript</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<style>
    h1{
        color: red;
    }
</style>
<body>
<div class="container">
    <br>
       <div class="text-center">
        <h1>Use Ondblclick Event In JavaScript</h1>
    </div>
    <br>
    <div class="well">
            <h2 ondblclick="double_click()">Double-click this paragraph to trigger a function.</h2>
            <h2 ondblclick="alert_double_click()">Double-click this paragraph to trigger a function.</h2>
        <h2 id="demo1"></h2>
        <h2 id="demo2"></h2>
    </div>
</body>
</html>
<script>
    function double_click() {
        document.getElementById("demo1").innerHTML = "Hello World! Welcome to BajarangiSoft";
    }
    function alert_double_click() {
        alert("Hello World! Welcome to BajarangiSoft");
    }
</script>

Related Post