HTML | DOM oncontextmenu Event - GeeksforGeeks

22 Jul, 2019
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
<!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        </div>          <script>            function myFunction() {                alert("right-clicked");            }        </script>    </center></body>  </html>
Output:Before:After:Example 2: Using JavaScript
<!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        </div>          <p id="try"></p>          <script>            document.getElementById(              "myDIV").oncontextmenu = function() {                GFGfun()            };              function GFGfun() {                var gfg = document.getElementById("try");                gfg.innerHTML = "right-clicked";            }        </script>    </center></body>  </html>
Output:Before:After:Example: In JavaScript, using the addEventListener() method:
<!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        </div>          <p id="try"></p>          <script>            document.getElementById(                "myDIV").addEventListener("contextmenu", GFGfun);              function GFGfun() {                var gfg = document.getElementById("try");                gfg.innerHTML = "right-clicked";            }        </script>    </center></body>  </html>
Output:Before:After:
Supported Browsers: The browsers supported by DOM oncontextmenu Event are listed below:
Google Chrome
Internet Explorer
Firefox
Apple Safari
Opera
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Akanksha_Rai
HTML-DOM
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Types of CSS (Cascading Style Sheet)
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
Design a web page using HTML and CSS
Form validation using HTML and JavaScript
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript