HTML DOM oncontextmenu Event
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" > w3wiki </ 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" > w3wiki </ 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" > w3wiki </ 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
Contact Us