How can I capture the right-click event in JavaScript?

javascript

event-handling

contextmenu

accessibility

byAnton Shumikhin·Dec 22, 2024

document.addEventListener('contextmenu', function(event) {
  event.preventDefault(); // Stop the browser's regular picnic (default context menu)
  // Custom action instead
  console.log('Right-click detected! Like Sherlock Holmes, ey!');
});

In the contextmenu event listener, prevent the default right-click menu using event.preventDefault(). Now you're set to implement custom behavior for right-click actions in your application.

Right-click event handling explained

Detecting right-click events introduces new dimensions of user interactions. JavaScript offers the contextmenu event triggered on a right-click, enabling advanced interaction models.

By stopping the default action, you create a window to inject your own logic and present a custom context menu. This leads to enhanced user experiences, matching your menu options to the purpose of your web application.

Customizing right-click behavior

The contextmenu event is a gateway to create specific actions or show a custom menu. It is beneficial within web applications where standard right-click options are either irrelevant or obstructive to application functionality.

Making it work across browsers

Remember that browsers may interpret the right-click in differing ways:

Detect the right-click using e.which === 3 and e.button === 2 inside mousedown event, for a more comprehensive cross-browser solution.
Centralize your right-click logic in a rightclick() function which is called upon right-click detection.

Prioritizing accessibility

Custom elements enhance user interactions, but always ponder on accessibility. Non-mouse users relying on assistive technologies should also be considered. Make sure your application remains operable, perhaps by offering keyboard alternatives to mouse-related actions.

Diving deeper into right-click handling

For your application to truly shine, you may consider:

Commanding control all over

Establish application-wide control by setting up a global right-click handler upon multiple elements or the entire document.

Right-click handling that's easy on resources

Employ event delegation, attaching an event onto a common parent element for the contextmenu event to achieve better performance.

Accounting for the keyboard

Some users may use keyboard shortcuts (Shift + F10 or Context Menu key) to access context menus. Capture this by listening for keydown events and checking appropriate key codes.

Keeping an eye out for touch devices

The concept of right-clicking varies on touch devices. Here it can be about long presses or multi-touch gestures. Account for these within your application's custom logic.

explain-codes / Javascript / How can I capture the right-click event in JavaScript?

Linked

How do I disable right click on my web page?



How to distinguish between left and right mouse click with jQuery



How to get the onclick calling object?



How to use a link to call JavaScript?



Access event to call preventdefault from custom function originating from onclick attribute of tag

