contextmenu
16 March, 2023
0
0
0
Contributors
About
The contextmenu event is triggered when the user right-clicks on an element on an app page or performs a similar context-specific action, such as pressing and holding on a touchscreen device. This event provides an opportunity for developers to customise the menu that appears when the user performs the action, or to perform some other action in response to the event.
The contextmenu event is commonly used to create custom context menus that appear when the user right-clicks on an element in a page. For example, an application might use this event to display a custom menu that allows the user to perform certain actions on an image or link, such as saving the image or copying the link to the clipboard.
The contextmenu event is supported by most modern web browsers and can be handled using standard JavaScript event handlers, such as addEventListener(). When the event is triggered, the browser passes an event object to the event handler function, which contains information about the event, such as the target element and the location of the mouse pointer at the time the event occurred.
Event listener
Here's an example of how you can use the contextmenu event listener:
CSS
.menu {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 120px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px;
}HTML
<h1 oncontextmenu="showMenu(event)">Right-click me to show menu</h1>
<div id="menu" class="menu">
<p>Menu Item 1</p>
<p>Menu Item 2</p>
<p>Menu Item 3</p>
</div>JavaScript
function showMenu(event) {
// Prevent the default context menu from appearing
event.preventDefault();
// Show the custom menu
let menu = document.getElementById("menu");
menu.style.display = "block";
menu.style.left = event.pageX + "px";
menu.style.top = event.pageY + "px";
}
// Hide the custom menu when the user clicks outside of it
document.addEventListener("click", function(event) {
let menu = document.getElementById("menu");
if (event.target != menu) {
menu.style.display = "none";
}
});Here, we've created a simple HTML page with a heading that triggers the showMenu() function when the user right-clicks on it. The showMenu() function first prevents the default context menu from appearing by calling the preventDefault() method on the event object. It then shows a custom menu by setting the display, left, and top CSS properties of a <div> element with an id of "menu".
We've also added an event listener to the click event of the document object, which hides the custom menu if the user clicks anywhere outside of it. This ensures that the custom menu disappears when the user clicks somewhere else on the page.
This is just a simple example, but it demonstrates how you can use the contextmenu event to create custom context menus in your applications.
Property
Here's an example of using the oncontextmenu property to attach an event handler function to a div element:
const divElement = document.querySelector('#myDiv');
divElement.oncontextmenu = function(event) {
// Prevent the default context menu from appearing
event.preventDefault();
// Perform some action when the user right-clicks on the div element
console.log('Div context menu opened');
};Here, the oncontextmenu property is used to assign an anonymous function as the event handler for the contextmenu event of the divElement. The function first prevents the default context menu from appearing by calling event.preventDefault(), and then logs a message to the console.
Inline
You can also use the contextmenu event inline in HTML using the oncontextmenu attribute. Here's an example:
<h1 oncontextmenu="alert('Custom context menu!')">Right-click me to show menu</h1>Here, we've added the oncontextmenu attribute to the <h1> element, which sets the alert() function to be called when the user right-clicks on the heading. When the user triggers the contextmenu event, the alert() function is called, which displays a simple message box with the text "Custom context menu!".
Note that using inline event handlers can make your code harder to read and maintain, especially if you have a lot of them. It's generally considered better practice to separate your JavaScript code from your HTML code by using event listeners.
Programmatic trigger
There is also a programmatic way to trigger the context menu using the contextmenu() method. This method is available on DOM elements and can be used to simulate a right-click event on an element, which will trigger the default context menu for that element.
Here's an example:
const myHeading = document.getElementById("myHeading");
// Simulate a right-click event on the heading
myHeading.addEventListener("click", function(event) {
if (event.button == 2) {
myHeading.contextmenu();
}
});Here, we've added an event listener to the click event of the <h1> element with an id of "myHeading". When the user clicks on the heading, the event listener checks whether the button property of the event object is equal to 2, which indicates that the right mouse button was clicked. If it is, the contextmenu() method is called on the heading element, which triggers the default context menu for that element.
Note that the contextmenu() method is not available on all browsers, and its behaviour may vary depending on the browser and operating system being used. It's generally better to use the contextmenu event to customise or replace the default context menu behaviour in your application, rather than relying on programmatic triggers.
javascript
contextmenu