The dblclick event triggers an occurrence when an element is clicked two times in rapid succession. This event is activated when an element is double-clicked within a brief timeframe. Additionally, we can utilize JavaScript's addEventListener method to initiate the double click event.
In HTML, the ondblclick attribute can be utilized to generate a double-click event.
Syntax
At this point, let's examine the syntax for establishing a double-click event in both HTML and JavaScript, considering both scenarios: without utilizing the addEventListener method and with the use of the addEventListener method.
In HTML
<element ondblclick = "fun()">
In JavaScript
object.ondblclick = function() { myScript };
In JavaScript by using the addEventListener method
object.addEventListener("dblclick", myScript);
Let’s examine a few examples to gain a clearer understanding of the double-click event.
Example - Using ondblclick attribute in HTML
In this illustration, we are generating the double-click event by utilizing the HTML ondblclick attribute.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id = "heading" ondblclick = "fun()"> Hello world :):) </h1>
<h2> Double Click the text "Hello world" to see the effect. </h2>
<p> This is an example of using the <b> ondblclick </b> attribute. </p>
<script>
function fun() {
document.getElementById("heading").innerHTML = " Welcome to the logic-practice.com ";
}
</script>
</body>
</html>
Output
Upon running the aforementioned code, the resulting output will be -
Upon executing a double-click on the phrase "Hello world," the resulting output will be -
At this point, we will explore the process of implementing a double-click event utilizing JavaScript.
Example - Using JavaScript
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id = "heading"> Hello world :):) </h1>
<h2> Double Click the text "Hello world" to see the effect. </h2>
<p> This is an example of creating the double click event using JavaScript. </p>
<script>
document.getElementById("heading").ondblclick = function() { fun() };
function fun() {
document.getElementById("heading").innerHTML = " Welcome to the logic-practice.com ";
}
</script>
</body>
</html>
Output
Upon performing a double-click on the text "Hello world", the resulting output will be -
Example - Using JavaScript's addEventListener method
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id = "heading"> Hello world :):) </h1>
<h2> Double Click the text "Hello world" to see the effect. </h2>
<p> This is an example of creating the double click event using the <b> addEventListener() method </b>. </p>
<script>
document.getElementById("heading").addEventListener("dblclick", fun);
function fun() {
document.getElementById("heading").innerHTML = " Welcome to the logic-practice.com ";
}
</script>
</body>
</html>
Output
Upon double-clicking the phrase "Hello world," the resulting output will be -
