<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.
<!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>
<!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>
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>
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>
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>
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>
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>