Open In App

HTML DOM oncontextmenu Event

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML DOM oncontextmenu event occurs when an element is right-clicked to open the context menu. 

Note: The oncontextmenu event is supported in all browsers but the contextmenu attribute is currently only supported in Firefox. 

Syntax: 

HTML:

<element oncontextmenu="myScript">

JavaScript:

object.oncontextmenu = function(){myScript};

In JavaScript, using the addEventListener() method:

object.addEventListener("contextmenu", myScript);

Example 1: Using HTML 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div {
            background: green;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h2>HTML DOM oncontextmenu Event</h2>
        <div oncontextmenu="myFunction()"
             contextmenu="mymenu">
          <p>Right-click inside the box</p>
        </div>
 
        <script>
            function myFunction() {
                alert("right-clicked");
            }
        </script>
    </center>
</body>
 
</html>


Output:

 

Example 2: Using JavaScript 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div {
            background: green;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h2>HTML DOM oncontextmenu Event</h2>
        <div id="myDIV" contextmenu="mymenu">
          <p>Right-click inside the box</p>
        </div>
        <p id="try"></p>
 
        <script>
            document.getElementById(
                "myDIV").oncontextmenu = function () {
                    GFGfun()
                };
 
            function GFGfun() {
                let gfg =
                    document.getElementById("try");
                gfg.innerHTML =
                    "right-clicked";
            }
        </script>
    </center>
</body>
</html>


Output: 

 

Example: In JavaScript, using the addEventListener() method: 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <style>
        div {
            background: green;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">
            GeeksforGeeks
        </h1>
        <h2>HTML DOM oncontextmenu Event</h2>
        <div id="myDIV" contextmenu="mymenu">
          <p>Right-click inside the box</p>
        </div>
        <p id="try"></p>
 
        <script>
            document.getElementById(
                "myDIV")
              .addEventListener("contextmenu", GFGfun);
            function GFGfun() {
                let gfg =
                    document.getElementById("try");
                gfg.innerHTML =
                    "right-clicked";
            }
        </script>
    </center>
</body>
</html>


Output: 

 

Supported Browsers: The browsers supported by DOM oncontextmenu Event are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Apple Safari
  • Opera


Last Updated : 22 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads