How to add dbclick() on right click in jQuery? Last Updated : 01 Jun, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: Comment More infoAdvertise with us Next Article How to toggle background color using right click in jQuery ? R rajatsandhu2001 Follow Improve Article Tags : Web Technologies JQuery Geeks Premier League Geeks-Premier-League-2022 CSS-Properties jQuery-Methods jQuery-Questions +2 More Similar Reads How to run a code on click event in jQuery ? In this article, we will see how to run the code after clicking on an event. To run the code after clicking an event, we use the click() method. The click() method is used to run the code when a click event occurs. The click() method to attach a click event handler to selected elements. Inside the h 1 min read How to run a code on double-click event in jQuery ? In this article, we will see how to run a code after double clicked the element using jQuery. To run the code on double clicked we use dblclick() method. This method is used to trigger the double-click event to occur. This method occurs when the selected element will be double clicked. Syntax: $(sel 1 min read How to disable right-click option using the jQuery ? The bind() method in jQuery is used to attach one or more event handlers for selected element and this method specifies a function to run when an event occurs. Syntax: $(selector).bind(event, data, function);Parameters: This method accepts three parameters as mentioned above and described below: eve 2 min read How to set alert message on button click in jQuery ? Setting an alert message on a button click in jQuery means using jQuery to capture the button's click event and trigger a browser alert box. This alert displays a custom message to the user whenever the button is clicked.jQuery CDN Link: We have linked the jQuery in our file using the CDN link. < 1 min read How to toggle background color using right click in jQuery ? In this article, we will learn to toggle the background color using the right-click in jQuery. Approach 1: The approach is by using the contextmenu event. The contextmenu() method is used to bind the contextmenu event to the element being used. This can be used to perform the color toggling action o 4 min read How to distinguish left and right mouse click using jQuery? jQuery can be used to distinguish which mouse button is being clicked. This can be used in various web applications where knowing a certain mouse button can be used to trigger certain functionality. Using the mousedown() method: The mousedown() method in jQuery can be used to bind an event handler t 2 min read Like