Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML oncontextmenu Event Attribute
The oncontextmenu event attribute in HTML is triggered when a user right-clicks on an element to open the context menu. This event allows developers to customize behavior when the context menu appears, such as displaying custom menus or preventing the default context menu from showing.
Syntax
Following is the syntax for the oncontextmenu event attribute −
<tagname oncontextmenu="script">Content</tagname>
The script can be a JavaScript function call or inline JavaScript code that executes when the user right-clicks on the element.
Parameters
The oncontextmenu event handler receives an event object as a parameter with the following properties −
event.preventDefault() − Prevents the default context menu from appearing
event.clientX − Returns the horizontal coordinate of the mouse pointer
event.clientY − Returns the vertical coordinate of the mouse pointer
Basic Usage Example
Following example demonstrates the basic usage of the oncontextmenu event attribute −
<!DOCTYPE html>
<html>
<head>
<title>oncontextmenu Event Example</title>
<style>
.box {
background: #db133a;
width: 140px;
height: 140px;
margin: 20px auto;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h1>HTML oncontextmenu Event Demo</h1>
<div oncontextmenu="changeBackground()" class="box">Right-click me</div>
<p>Right-click on the red box to change the background color.</p>
<script>
function changeBackground() {
document.body.style.background = "#084C61";
document.body.style.color = "#fff";
alert("Context menu event triggered!");
}
</script>
</body>
</html>
When you right-click on the red box, the page background changes to dark blue and displays an alert message.
Preventing Default Context Menu
You can prevent the default browser context menu from appearing by using event.preventDefault() or returning false from the event handler.
Example
<!DOCTYPE html>
<html>
<head>
<title>Disable Context Menu</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Context Menu Disabled</h1>
<div oncontextmenu="return false" style="background: #28a745; color: white; padding: 20px; margin: 20px 0;">
Right-click here - context menu is disabled
</div>
<div oncontextmenu="disableMenu(event)" style="background: #007bff; color: white; padding: 20px; margin: 20px 0;">
Right-click here - custom prevention
</div>
<script>
function disableMenu(event) {
event.preventDefault();
alert("Context menu prevented!");
}
</script>
</body>
</html>
The first div uses return false to disable the context menu, while the second div uses preventDefault() with a custom message.
Creating Custom Context Menu
Following example shows how to create a custom context menu using the oncontextmenu event −
<!DOCTYPE html>
<html>
<head>
<title>Custom Context Menu</title>
<style>
.target {
background: #ffc107;
padding: 30px;
margin: 20px 0;
text-align: center;
cursor: pointer;
}
.custom-menu {
position: absolute;
background: white;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
display: none;
z-index: 1000;
}
.menu-item {
padding: 10px 20px;
cursor: pointer;
border-bottom: 1px solid #eee;
}
.menu-item:hover {
background: #f5f5f5;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Custom Context Menu</h1>
<div class="target" oncontextmenu="showCustomMenu(event)">
Right-click for custom menu
</div>
<div id="customMenu" class="custom-menu">
<div class="menu-item" onclick="menuAction('Option 1')">Option 1</div>
<div class="menu-item" onclick="menuAction('Option 2')">Option 2</div>
<div class="menu-item" onclick="menuAction('Option 3')">Option 3</div>
</div>
<script>
function showCustomMenu(event) {
event.preventDefault();
const menu = document.getElementById('customMenu');
menu.style.display = 'block';
menu.style.left = event.clientX + 'px';
menu.style.top = event.clientY + 'px';
}
function menuAction(option) {
alert('You selected: ' + option);
document.getElementById('customMenu').style.display = 'none';
}
document.addEventListener('click', function() {
document.getElementById('customMenu').style.display = 'none';
});
</script>
</body>
</html>
This example creates a custom context menu that appears at the mouse position when right-clicking on the yellow area.
Browser Compatibility
The oncontextmenu event attribute is supported by all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. However, mobile devices may handle context menu events differently due to touch interfaces.
| Browser | Support | Notes |
|---|---|---|
| Chrome | Full support | All versions |
| Firefox | Full support | All versions |
| Safari | Full support | All versions |
| Edge | Full support | All versions |
| Mobile browsers | Limited | Long-press may trigger event |
Common Use Cases
The oncontextmenu event is commonly used in the following scenarios −
Image protection − Disabling right-click on images to prevent easy downloading
Custom menus − Creating application-specific context menus
Game interfaces − Handling right-click actions in web games
Text editors − Providing formatting options via context menu
Data tables − Offering row-specific actions through right-click
Conclusion
The oncontextmenu event attribute provides a way to handle right-click interactions on HTML elements. It can be used to prevent the default context menu, create custom menus, or execute specific actions. This event is widely supported across browsers and is essential for creating interactive web applications with custom context menu behavior.
230 Views
