Ondblclick event handling by JavaScript using div and button

We can trigger any function by using double click event of mouse. We will try this on a div tag and by using a button. Here is a simple code using a button.

<input type=button ondblclick=dbl_click(); value='Double Click'>

We will keep one button and a div layer where we will use double click event to change the background colour of the layer.

Demo of double click

Here is the source code of this demo

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Demo of double click on div tag & button</title>
<script langauge="javascript">
function dbl_click(){
document.getElementById("box").innerHTML= 'This is double click' ;
document.getElementById("box").style.background= '#ffccff' ;
}

</script>
<link rel="stylesheet" href="../images/all11.css" type="text/css">
</head>
<body>
<input type=button ondblclick=dbl_click(); value='Double Click'>
<div id='box' ondblClick=dbl_click(); style="position:absolute;left: 100px;top:50px;background-color: #f1f1f1; width: 300px; height : 100px;"> Double Click   here</div>
 <br><br><br><br><br> <br><br><br><br>
<a href=ondblclick-demo.php>Refresh and Try again</a>
</body>
</html>

Using double click and single click together.

By using same buttons and layers we can activate two different JavaScript functions based on the click type ( single click or double click )

Demo of single and double click

Source code is here.

<!doctype html public "-//w3c//dtd html 3.2//en">
<html>
<head>
<title>Demo of double click & Single click on button and on div tag</title>
<script langauge="javascript">
function dbl_click(){
document.getElementById("box").innerHTML= 'This is double click' ;
document.getElementById("box").style.background= '#ffccff' ;
}

function click_me(){
document.getElementById("box").innerHTML= 'This is single click' ;
document.getElementById("box").style.background= '#ccffff' ;
}
</script>
</head>
<body >

<div id='box' onClick=click_me(); ondblClick=dbl_click(); style="position:absolute;left: 100px;top:50px;background-color: #f1f1f1; width: 300px; height : 100px;"> Double Click or single click  here</div>
<input type=button value=Click onClick=click_me(); ondblclick=dbl_click();>
 <br><br><br><br><br> <br><br><br><br>
<a href=ondblclick-demo2.php>Refresh and Try again</a>

</body>
</html>

Example 1: Changing the Style of Multiple Elements

We can use the ondblclick event to change the styles of multiple elements in a web page. This can be useful for interactive applications where a double-click triggers bulk changes.

Demo of changing style of Multiple Elements


<!DOCTYPE html>
<html>
<head>
    <title>Change Styles on Double Click</title>
    <style>
        .highlight {
            background-color: yellow;
            color: red;
        }
    </style>
</head>
<body>
    <p class="text-primary" ondblclick="highlightAll()">Double-click here to highlight all the paragraphs below.</p>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <p>Paragraph 3</p>

    <script class="text-success">
        function highlightAll() {
            const paragraphs = document.querySelectorAll('p:not([ondblclick])');
            paragraphs.forEach(paragraph => {
                paragraph.classList.toggle('highlight');
            });
        }
    </script>
</body>
</html>

Example 2: Confirming Actions Before Proceeding

We can use the ondblclick event to confirm an action before performing a task, such as deleting an item.

Demo of Confirming Actions


<!DOCTYPE html>
<html>
<head>
    <title>Confirm Delete Action</title>
</head>
<body>
    <button class="text-danger" ondblclick="confirmDelete()">Double-click to Delete</button>

    <script class="text-success">
        function confirmDelete() {
            const confirmed = confirm('Are you sure you want to delete this item?');
            if (confirmed) {
                alert('Item deleted successfully!');
            } else {
                alert('Action canceled.');
            }
        }
    </script>
</body>
</html>

Example 3: Dynamic Addition of ondblclick Events

In some applications, we might need to add ondblclick events dynamically to elements created at runtime. This is useful in scenarios like adding new list items or rows in a table.

Demo of Dynamic Addition of elements on Double click


<!DOCTYPE html>
<html>
<head>
    <title>Dynamic ondblclick Event</title>
</head>
<body>
    <button class="text-info" onclick="addListItem()">Add List Item</button>
    <ul id="dynamicList"></ul>

    <script class="text-success">
        function addListItem() {
            const list = document.getElementById('dynamicList');
            const newItem = document.createElement('li');
            newItem.textContent = 'Double-click to remove me';
            newItem.ondblclick = function () {
                list.removeChild(newItem);
            };
            list.appendChild(newItem);
        }
    </script>
</body>
</html>

Example 4: Highlighting Selected Text

We can use the ondblclick event to highlight text that the user selects on the page. This can be useful in applications like text editors or study tools.

Demo of Highlighting Text on Double click


<!DOCTYPE html>
<html>
<head>
    <title>Highlight Selected Text</title>
</head>
<body>
    <p class="text-primary" ondblclick="highlightSelection()">Double-click to highlight the selected text in this paragraph.</p>

    <script class="text-success">
        function highlightSelection() {
            const selection = window.getSelection();
            const range = selection.getRangeAt(0);
            const span = document.createElement('span');
            span.style.backgroundColor = 'yellow';
            range.surroundContents(span);
        }
    </script>
</body>
</html>

Example 5: Restricting ondblclick to Specific Areas

In some cases, we may want to limit the ondblclick event to a specific region of the page. This can be useful for interactive components like games or design tools.

Demo of Restricting on Double click to specific area


<!DOCTYPE html>
<html>
<head>
    <title>Restricted ondblclick Event</title>
</head>
<body>
    <div class="text-warning" style="width: 300px; height: 200px; border: 1px solid black;" ondblclick="showCoordinates(event)">
        Double-click inside this box to get coordinates.
    </div>

    <script class="text-success">
        function showCoordinates(event) {
            alert(`Coordinates: X = ${event.offsetX}, Y = ${event.offsetY}`);
        }
    </script>
</body>
</html>

Event Handling onKeyPress Mouse event Textarea onClick event onKeyDown Mouse event

Subscribe to our YouTube Channel here

On Double Click of button ondblclick()