How to add dbclick() on right click in jQuery?

Last Updated : 01 Jun, 2023

The jQuery dblclick() method is used to detect whenever a particular element is double-clicked. This method only detects left mouse button double clicks and not the right mouse button double clicks.

In this article, we will see how to simulate the double right mouse click in jQuery.

Approach:

There are two HTML div elements, one with an id target and the other with an id result.
Attach an event handler to the target id by using the on() method. The event name is contextmenu which simply suppresses the right-click menu as we want to prevent the default action of right-clicking using the preventDefault() method.
The mouseup() method is attached to the target id element to detect the event when the user releases a mouse button over this element. An anonymous function with a parameter event is passed as a parameter to the mouseup() method such that we can utilize the which, originalEvent, and the detail properties of the event object.
The which property is used to check which mouse button is clicked, left or right It returns 3 if it is a right-click, so we use this as a base condition.
We use the originalEvent and the detail properties of the event object to check whether it is a single right-click or a double right-click. These properties return 2 if it is a double right-click else returns 1. The result id element displays this single or double right-click using the text() method.

Example 1: In this example, we are using the above-explained approach.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
            font-size: 2.5rem;
        }

        div {
            font-weight: bold;
            font-size: 1.5rem;
        }

        #target {
            cursor: pointer;
            margin-bottom: 2rem;
        }

        #result {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <div id="target">Right click here to see effect</div>
    <div id="result"></div>
    <script type="text/javascript">
        // Suppress the right-click menu
        $("#target").on("contextmenu", function (event) {
            event.preventDefault();
        });

        $("#target").mouseup(function (event) {
            if (event.which === 3) {
                if (event.originalEvent.detail === 2) {
                    $("#result").text("Double right-click!");
                } else if (event.originalEvent.detail === 1) {
                    $("#result").text("Single right-click!");
                }
            }
        });
    </script>
</body>
</html>

Output:

Example 2: In this example, we are only checking for a double right-click instead of both a single and a double right-click. It means only the condition event.originalEvent.detail === 2 is checked. Moreover, we append the text every time on double right click instead of simply displaying it once so that we can see exactly how many doubles right-click have been performed. We have performed the double right-click operation exactly 5 times.

HTML

<!DOCTYPE html>
<html>
<head>
    <!-- jQuery -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>

    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
            font-size: 2.5rem;
        }

        div {
            font-weight: bold;
            font-size: 1.5rem;
        }

        #target {
            cursor: pointer;
            margin-bottom: 2rem;
        }

        #result {
            color: green;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <div id="target">Right click here to see effect</div>
    <div id="result"></div>
    <script type="text/javascript">
        // Suppress the right-click menu
        $("#target").on("contextmenu", function (event) {
            event.preventDefault();
        });

        $("#target").mouseup(function (event) {
            if (event.which === 3) {
                if (event.originalEvent.detail === 2) {
                    $("#result").append("Double right-click!" + "<br />");
                }
            }
        });
    </script>
</body>
</html>

Output:

How to toggle background color using right click in jQuery ?

rajatsandhu2001

Improve

Article Tags :

How to add dbclick() on right click in jQuery?

Similar Reads

Thank You!

What kind of Experience do you want to share?