Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Execute a script when the element is being double-clicked in HTML?
The dblclick event is triggered when a pointing device button (such as a mouse) is quickly clicked twice on the same element within a short time period. This event is commonly used to provide alternative actions or shortcuts in web applications, similar to double-clicking files in desktop environments.
There are three main ways to implement double-click functionality in HTML −
Using the
ondblclickattribute directly in HTML elementsAssigning the
ondblclickproperty via JavaScriptUsing the
addEventListener()method with the "dblclick" event
Syntax
Following are the different syntaxes for implementing double-click events −
HTML ondblclick attribute:
<element ondblclick="functionName()">Content</element>
JavaScript ondblclick property:
element.ondblclick = function() { /* code */ };
addEventListener method:
element.addEventListener("dblclick", functionName);
Using ondblclick Attribute in HTML
The ondblclick attribute can be added directly to HTML elements to execute JavaScript code when the element is double-clicked.
Example
Following example demonstrates using the ondblclick attribute to change text content −
<!DOCTYPE html>
<html>
<head>
<title>ondblclick Attribute Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1 id="tutorials" ondblclick="changeText()" style="color: blue; cursor: pointer;">
HELLO EVERYONE :)
</h1>
<p>Double-click the text above to see the effect.</p>
<script>
function changeText() {
document.getElementById("tutorials").innerHTML = "WELCOME TO TUTORIALSPOINT!";
document.getElementById("tutorials").style.color = "green";
}
</script>
</body>
</html>
The output displays "HELLO EVERYONE :)" in blue text. Double-clicking changes it to "WELCOME TO TUTORIALSPOINT!" in green −
Before double-click: HELLO EVERYONE :) (blue text) After double-click: WELCOME TO TUTORIALSPOINT! (green text)
Using JavaScript ondblclick Property
The ondblclick property allows you to assign event handlers using JavaScript, providing more flexibility and separation between HTML structure and behavior.
Example
Following example shows how to assign a double-click event using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>JavaScript ondblclick Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1 id="tutorial" style="color: red; cursor: pointer;">HELLO</h1>
<p>Double-click the text above to see the effect.</p>
<script>
document.getElementById("tutorial").ondblclick = function() {
changeContent();
};
function changeContent() {
document.getElementById("tutorial").innerHTML = "WELCOME TO TUTORIALSPOINT";
document.getElementById("tutorial").style.color = "purple";
}
</script>
</body>
</html>
Initially displays "HELLO" in red. Double-clicking changes the text to "WELCOME TO TUTORIALSPOINT" in purple −
Before double-click: HELLO (red text) After double-click: WELCOME TO TUTORIALSPOINT (purple text)
Using addEventListener() Method
The addEventListener() method is the modern and preferred approach for handling events. It allows multiple event listeners on the same element and provides better control over event handling.
Example
Following example demonstrates the addEventListener() method for double-click events −
<!DOCTYPE html>
<html>
<head>
<title>addEventListener Method Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1 id="tutorial" style="color: navy; cursor: pointer;">Hello</h1>
<p>Double-click the text above to see the effect.</p>
<p id="status">Status: Ready</p>
<script>
document.getElementById("tutorial").addEventListener("dblclick", function() {
document.getElementById("tutorial").innerHTML = "WELCOME TO TUTORIALSPOINT";
document.getElementById("tutorial").style.color = "orange";
document.getElementById("status").innerHTML = "Status: Text changed!";
});
</script>
</body>
</html>
The example shows "Hello" in navy color with a status indicator. Double-clicking updates both the text and status −
Before double-click: Hello (navy text)
Status: Ready
After double-click: WELCOME TO TUTORIALSPOINT (orange text)
Status: Text changed!
Comparison of Methods
Following table compares the different approaches to handle double-click events −
| Method | Advantages | Disadvantages |
|---|---|---|
| ondblclick Attribute | Simple, direct implementation | Mixes HTML and JavaScript; only one handler per element |
| ondblclick Property | Separates JavaScript from HTML | Only one handler per element; can be overwritten |
| addEventListener() | Multiple handlers; better control; modern standard | Slightly more verbose syntax |
Practical Example − Image Gallery
Following example shows a practical use case where double-clicking changes images in a simple gallery −
<!DOCTYPE html>
<html>
<head>
<title>Double-Click Image Gallery</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Double-Click Image Gallery</h2>
<div id="imageContainer" style="width: 200px; height: 150px; margin: 20px auto; border: 2px solid #ccc; background: #f0f0f0; cursor: pointer; display: flex; align-items: center; justify-content: center;">
<span>Image 1</span>
</div>
<p>Double-click the image area to cycle through images</p>
<p id="imageInfo">Current: Image 1 of 3</p>
<script>
let currentImage = 1;
const totalImages = 3;
const imageContainer = document.getElementById("imageContainer");
const imageInfo = document.getElementById("imageInfo");
imageContainer.addEventListener("dblclick", function() {
currentImage = currentImage === totalImages ? 1 : currentImage + 1;
imageContainer.innerHTML = "<span>Image " + currentImage + "</span>";
imageInfo.innerHTML = "Current: Image " + currentImage + " of " + totalImages;
});
</script>
</body>
</html>
This gallery cycles through three images when double-clicked, demonstrating a practical application of the dblclick event.
Conclusion
The double-click event can be implemented using the ondblclick attribute, JavaScript property, or addEventListener() method. The addEventListener() approach is recommended for modern web development as it provides better flexibility and follows current best practices.
501 Views
