August 12, 2021

How to Detect Right Click in Javascript

By Krishnaa JavaScript Questions 0 Comments

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 of container. It is just a wrapper for the rest of the elements.
Inside the container, we have 3 elements (div, input, and h1).
The inner div element has a class of box 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 the head element.

We have also included our javascript file script.js with a script 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 the document.querySelector() method and stored it result variable.

Detect Right Click on Webpage

We have attached contextmenu event listener to the document. Inside the event handler function, we are simply setting the inner text of the h1 element to "Document Right Click"

Detect Right Click on Input Element

We have selected the input element using the document.querySelector() method and stored it inputEl variable.
We have attached contextmenu event listener to the input element. Inside the event handler function, we are simply setting the inner text of the h1 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 the document.querySelector() method and stored it divEl variable.
We have attached contextmenu event listener to the div element. Inside the event handler function, we are simply setting the inner text of the h1 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();
});

You May Also Like: