How to display a message on dblclick event on all paragraphs of a page using jQuery ?

Last Updated : 23 Apr, 2021

The purpose of this article is to display a message to the double click event on all paragraphs on a page. Whenever you double-click on any of the paragraphs then the message will appear.

Used method in jQuery:

dblclick(): This method is used to trigger the dblclick event, or attaches a function to run when a double click event occurs.

Syntax:

$(selector).dblclick(optional_function);

Approach:

First, create the HTML page with some paragraph elements.
Using the above syntax to display a message after the trigger of double-click event.

Example:

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> 
    </script> 
  
    <style> 
        body { 
            text-align: center; 
            font-size: 30px; 
        } 
    </style> 
  
    <script> 
        $(document).ready(function () { 
            $("p").dblclick(function () { 
                $("#result").show().html( 
                    "The paragraph was double-clicked"); 
            }); 
        }); 
    </script> 
  
  
</head> 
  
<body> 
    <h2 style="color:green">GeeksforGeeks</h2> 
  
    <p> 
        Double-Click on this paragraph  
        to see the result. 
    </p> 
  
    <p>Second paragraph</p> 
    <span>This is span</span> 
  
    <p>Third paragraph</p> 
  
    <div style="height:10px;"></div> 
    <div id="result"></div> 
</body> 
  
</html> 