How to display the tag name of the clicked element using jQuery ?

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>

Output:

How to display the tag name of the clicked element using jQuery ?

P

pall58183

Improve

Article Tags :

Similar Reads

How to display the tag name of the clicked element using jQuery ?

Given a HTML document containing some elements and the task is to display the clicked element. Approach: First we create a HTML document containing some elements and add a jQuery function to display the clicked element. We select the HTML body using jQuery selector and when user click the element th

How to click on a paragraph and add another paragraph using jQuery ?

In this article, we will learn how to add another paragraph to the document when a paragraph is clicked using jQuery. Approach: We will be using the delegate() and after() methods of jQuery. The delegate() method is used to add event listeners to the given element. This will be used to add a click e

How to insert a DOM element after all paragraphs using jQuery ?

In this article, we will insert a DOM element after all paragraph elements using jQuery. To insert a DOM element we use after() and createTextNode() methods. The createTextNode() method is used to create a TextNode which contains an element node and a text node. It is used to provide text to an elem

How to change the color of any paragraph to red on mouseover event using jQuery ?

In this article, we will learn how to change the color of any paragraph to red on a mouseover event. Approach: This can be achieved by using the on() method of jQuery to attach an event handler function on a mouseover event. This event fires when the user hovers the cursor on any paragraph. The hand

How to append a jQuery object to all paragraphs using jQuery ?

In this article, we will see how to append a jQuery object to all paragraphs using jQuery. Append means we add something to an existing element. The object is used to define a container for an external resource like a page, a picture, a media player, or a plug-in application. Used Methods: ready() M

How to change background color of paragraph on double click using jQuery ?

In this article, we will see how to change the background color of a paragraph using jQuery. To change the background color, we use on() method. The on() method is used to listen the event on an element. Here we are going to use dblclick event. For changing the background color we are going to use c

How to click a button to animate the paragraph element using jQuery ?

In this article, we will click a button to animate the paragraph element using jQuery. To animate the paragraph elements, we use animate() method. The animate() method is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the ani

How to insert a jQuery object after all paragraphs using jQuery ?

The task is to insert a jQuery object after all the paragraphs using jQuery. Approach: Create DOM element or jQuery object using <span> tag.Create a paragraph using <p> tag.Create a button using button tag after clicking on which the object will be inserted after paragraph.Write a script

How to find all textarea and paragraphs to make a border using jQuery ?

Given a set of textareas, the task is to apply a border on each of them and subsequently add some paragraphs and then define a border on every paragraph using the jQuery library. Approach 1: Using the click(), css() and add() methods in jQuery: There are two textareas, two paragraphs, and one button

How to add a class to the last paragraph element using jQuery ?

In this article, we will learn to add a class to the last paragraph element using jQuery. To add a class to the last paragraph element, we use last() and addClass() methods. The jQuery last() function is an inbuilt function that is used to find the last element of the specified elements. Syntax: $(s