Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Execute a script when the element is being double-clicked in HTML?
The dblclick event is triggered when a pointing device button, such as the mouse's main button, is double-clicked, or when it is quickly clicked twice on the same element in a brief period of time.
Following are the examples…
Example: Using ondblclick attribute in HTML
In the following example we are using ondblclick attribute for creating the double click event using HTML.
<!DOCTYPE html> <html> <body> <h1 id = "tutorials" ondblclick = "varma()"> HELLO EVERYONE :):) </h1> <h2> Double Click the text "HELLO EVERYONE" to see the effect. </h2> <script> function varma() { document.getElementById("tutorials").innerHTML = "WELCOME TO THE TUTORIALSPOINT.. "; } </script> </body> </html>
Output
On executing the above script it will generate the following output −
At the start, When you try to excute the code it will open up a window consisting of text “HELLO EVERYONE :):)”.
On double clicking the text “HELLO EVERYONE” our dblclick event get triggered and display a text “WELCOME TO THE TUTORIALSPOINT.”
Example: Using JavaScript
In the following example we are creating a double click event using javascript.
<!DOCTYPE html> <html> <body> <h1 id = "tutorial"> HELLO </h1> <h2> Double Click To See Effect</h2> <script> document.getElementById("tutorial").ondblclick = function() { varma()}; function varma() { document.getElementById("tutorial").innerHTML = " WELCOME TO TUTORIALSPOINT "; } </script> </body> </html>
Output
When we try to execute the script, the output window pops up, displaying the text "hello". with a prompt (double click to see the effect).
On double clicking the text "hello", the dblclick gets activated and displays the text "welcome to tutorialspoint".
Example: Using addEventListener() method
In the following example we are creating double click evet using the addeventlistener() method.
<!DOCTYPE html> <html> <body> <h1 id = "tutorial"> Hello</h1> <h2> Double Click to see effect</h2> <script> document.getElementById("tutorial").addEventListener("dblclick", varma); function varma() { document.getElementById("tutorial").innerHTML = " WELCOME TO TUTORIALSPOINT "; } </script> </body> </html>
Output
On executing the above script, it will display the text "hello" attached with a prompt(double click to see effect)
On double clicking the text "hello", the event will come into play and display the text "welcome to tutorialspoint".
227 Views
