How to Detect Right Click in Javascript
In this tutorial, you will learn how to detect right click in javascript. Whenever we do the right click on any webpage using the mouse, we get a context menu. The context menu may contain fewer or more options depending upon what browser you are using.
Currently, we have a lot of browsers in the market such as Firefox, Chrome, Safari, etc. These days if you are using some sort of browser extension, then it might add some extra context menu options.
Detecting mouse right click in javascript is very easy. In javascript, we have contextmenu
event which is triggered whenever a user does the right click on your webpage. In the event handler function, you can execute whatever code you want.
In the following example, we have one input
and one div
element. Just for the sake of selection and styling purposes, the div
element is given a class of box. We will simply detect right click on the input
element, div
element, and the document
. Depending upon that, we will display relevant text in the h1 element.
Please have a look over the code example and steps given below.
HTML & CSS
- We have a
div
element with a class ofcontainer
. It is just a wrapper for the rest of the elements. - Inside the container, we have 3 elements (
div
,input
, andh1
). - The inner
div
element has a class ofbox
and it does not have any child elements. - The
input
element is of type text with no default value but a placeholder"Input Element"
. - The inner text for the
h1
element is“Result”
. - We have done some basic styling using CSS and added the link to our
style.css
stylesheet inside thehead
element. - We have also included our javascript file
script.js
with ascript
tag at the bottom.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="container"> <h1>Result</h1> <input type="text" placeholder="Input Element"> <div class="box"></div> </div> <script src="script.js"></script> </body> </html>
.container { display: flex; flex-direction: column; align-items: center; } input { display: block; padding: 10px 20px; margin: 10px auto; } .box { height: 200px; width: 200px; border: 1px solid black; }
Javascript
- We have selected the
h1
element using thedocument.querySelector()
method and stored itresult
variable.
Detect Right Click on Webpage
- We have attached
contextmenu
event listener to thedocument
. Inside the event handler function, we are simply setting the inner text of theh1
element to"Document Right Click"
Detect Right Click on Input Element
- We have selected the
input
element using thedocument.querySelector()
method and stored itinputEl
variable. - We have attached
contextmenu
event listener to theinput
element. Inside the event handler function, we are simply setting the inner text of theh1
element to"Input Right Click"
- We do not want the event to bubble up that is why we are calling
e.stopPropagation()
Detect Right Click on DIV Element
- We have selected the
div
element using thedocument.querySelector()
method and stored itdivEl
variable. - We have attached
contextmenu
event listener to thediv
element. Inside the event handler function, we are simply setting the inner text of theh1
element to"DIV Right Click"
- We do not want the event to bubble up that is why we are calling
e.stopPropagation()
NOTE: You must call the e.stopPropagation()
method to prevent event bubbling. If you skip this part, then contextmenu
event will be handled by the document
because the document
is a root node.
let result = document.querySelector("h1"); document.addEventListener("contextmenu", () => { result.innerText = "Document Right Click"; }); let inputEl = document.querySelector("input"); inputEl.addEventListener("contextmenu", (e) => { result.innerText = "Input Right Click"; e.stopPropagation(); }); let divEl = document.querySelector(".box"); divEl.addEventListener("contextmenu", (e) => { result.innerText = "DIV Right Click"; e.stopPropagation(); });