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
HTML ondblclick Event Attribute
The HTML ondblclick attribute is an event handler that triggers when a user double-clicks on an HTML element. This attribute allows you to execute JavaScript code in response to the double-click mouse event.
Syntax
Following is the syntax for using the ondblclick attribute −
<tagname ondblclick="script">Content</tagname>
Parameters
script − The JavaScript code to execute when the element is double-clicked. This can be a function call or inline JavaScript statements.
Example − Button Double-Click
Following example demonstrates the ondblclick event attribute with a button element −
<!DOCTYPE html>
<html>
<head>
<title>HTML ondblclick Event Attribute</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.btn {
background: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.btn:hover {
background: #0056b3;
}
.message {
margin-top: 20px;
font-size: 18px;
color: #28a745;
}
</style>
</head>
<body>
<h1>HTML ondblclick Event Demo</h1>
<p>Double-click the button below:</p>
<button class="btn" ondblclick="showMessage()">Double Click Me</button>
<div id="output" class="message"></div>
<script>
function showMessage() {
document.getElementById('output').innerHTML = 'Button was double-clicked!';
}
</script>
</body>
</html>
The output shows a button that responds to double-click events −
HTML ondblclick Event Demo Double-click the button below: [Double Click Me] (blue button) (After double-clicking: "Button was double-clicked!" appears in green)
Example − Text Element Double-Click
Following example shows how the ondblclick attribute works with text elements −
<!DOCTYPE html>
<html>
<head>
<title>Text Double-Click Event</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.clickable-text {
background: #f8f9fa;
padding: 15px;
border: 2px dashed #6c757d;
margin: 10px 0;
cursor: pointer;
border-radius: 5px;
}
.highlighted {
background: #fff3cd;
border-color: #ffc107;
}
</style>
</head>
<body>
<h2>Double-Click to Highlight Text</h2>
<p class="clickable-text" ondblclick="highlightText(this)">
Double-click this paragraph to highlight it.
</p>
<p class="clickable-text" ondblclick="highlightText(this)">
This is another paragraph you can double-click.
</p>
<script>
function highlightText(element) {
element.classList.toggle('highlighted');
element.innerHTML = element.classList.contains('highlighted') ?
'This text is now highlighted!' :
'Double-click this paragraph to highlight it.';
}
</script>
</body>
</html>
Double-clicking the paragraphs toggles their highlight state and changes their text content.
Example − Image Double-Click
Following example demonstrates using ondblclick with images to show or hide additional information −
<!DOCTYPE html>
<html>
<head>
<title>Image Double-Click Event</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
text-align: center;
}
.image-container {
display: inline-block;
margin: 20px;
}
.sample-image {
width: 200px;
height: 150px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border: 2px solid #333;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.info {
margin-top: 10px;
padding: 10px;
background: #e9ecef;
border-radius: 5px;
display: none;
}
</style>
</head>
<body>
<h2>Double-Click Images for Details</h2>
<div class="image-container">
<div class="sample-image" ondblclick="toggleInfo('info1')">
Image 1
</div>
<div id="info1" class="info">
Details about Image 1: This is sample information.
</div>
</div>
<div class="image-container">
<div class="sample-image" ondblclick="toggleInfo('info2')">
Image 2
</div>
<div id="info2" class="info">
Details about Image 2: More sample information here.
</div>
</div>
<script>
function toggleInfo(infoId) {
var info = document.getElementById(infoId);
info.style.display = info.style.display === 'block' ? 'none' : 'block';
}
</script>
</body>
</html>
Double-clicking each image toggles the visibility of its associated information panel.
Key Points
The ondblclick event is triggered by two rapid mouse clicks on the same element.
It can be applied to almost any HTML element, including buttons, text, images, and divs.
The event handler can execute inline JavaScript or call external functions.
Double-click events are commonly used for actions like editing text, opening dialogs, or toggling states.
The ondblclick event occurs after two onclick events, so both will be triggered in sequence.
Browser Compatibility
The ondblclick attribute is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the HTML standard and works consistently across different platforms.
Conclusion
The HTML ondblclick attribute provides a simple way to handle double-click events on any HTML element. It enables interactive functionality by executing JavaScript code when users double-click, making it useful for creating responsive user interfaces and enhancing user experience.
241 Views
