The oncontextmenu attribute is an event attribute that defines a handler script that will be run when the user right-clicks on an HTML element.
Definition and Usage
➔ When the user performs a right-click action on the element, the script is executed.
➔ This allows users to customize or override the default context menu behavior for specific elements.
➔ Any right-click event that has not been disabled (by calling the preventDefault() method) will generate a contextmenu event on the element.
Applies to
This attribute can be used on the following element.
| Attribute | Element |
|---|---|
| oncontextmenu | All visible elements |
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML oncontextmenu Attribute Example</title>
<meta charset="utf-8" />
<style>
.position {
position: absolute;
width: 1px;
height: 1px;
display: none;
}
.container {
width: 120px;
height: auto;
border: 1px solid black;
background: #efffff;
transition: 0.9s;
}
table {
text-align: left;
width: 99%;
margin-left: auto;
margin-right: auto;
}
td {
font-family: arial;
font-size: 12px;
padding: 5px;
border-bottom: 1px solid #d1d1d1;
vertical-align: middle;
text-align: left;
}
td:hover {
background: lightblue;
transition: 0.6s;
cursor: pointer;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<h2>HTML oncontextmenu Attribute Example</h2>
<p>This example is for oncontextmenu event attribute, right click in any of the document area to trigger oncontextmenu event and execute script to show context menu.</p>
<div class="position">
<div class="container">
<table border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td>Format Document Ctrl+Shift+F<br>
</td>
</tr>
<tr>
<td>Cut
Ctrl+X<br>
</td>
</tr>
<tr>
<td>Copy Ctrl+C<br>
</td>
</tr>
<tr>
<td>Paste Ctrl+V<br>
</td>
</tr>
<tr>
<td>Option 5<br>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var cls = true;
var ops;
window.onload = function () {
document.querySelector(".container").addEventListener("mouseenter", function () {
cls = false;
});
document.querySelector(".container").addEventListener("mouseleave", function () {
cls = true;
});
ops = document.querySelectorAll(".container td");
for (let i = 0; i < ops.length; i++) {
ops[i].addEventListener("click", function () {
document.querySelector(".position").style.display = "none";
setTimeout(function () {
/* Action code goes here */
alert("This action is for," + ops[i].textContent);
}, 10);
});
}
}
document.addEventListener("contextmenu", function () {
var e = window.event;
e.preventDefault();
document.querySelector(".container").style.padding = "0px";
var x = e.clientX;
var y = e.clientY;
var docX = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || document.body.offsetWidth;
var docY = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || document.body.offsetHeight;
var border = parseInt(getComputedStyle(document.querySelector(".container"), null).getPropertyValue('border-width'));
var objX = parseInt(getComputedStyle(document.querySelector(".container"), null).getPropertyValue('width')) + 2;
var objY = parseInt(getComputedStyle(document.querySelector(".container"), null).getPropertyValue('height')) + 2;
if (x + objX > docX) {
let diff = (x + objX) - docX;
x -= diff + border;
}
if (y + objY > docY) {
let diff = (y + objY) - docY;
y -= diff + border;
}
document.querySelector(".position").style.display = "block";
document.querySelector(".position").style.top = y + "px";
document.querySelector(".position").style.left = x + "px";
});
window.addEventListener("resize", function () {
document.querySelector(".position").style.display = "none";
});
document.addEventListener("click", function () {
if (cls) {
document.querySelector(".position").style.display = "none";
}
});
document.addEventListener("wheel", function () {
if (cls) {
document.querySelector(".position").style.display = "none";
static = false;
}
});
</script>
</body>
</html>
Click on the "Try it Now" button to see how it works.