How do you detect right-click events and handle context menus in JavaScript?

Right Click Event Handling in JavaScript

Detecting right clicks in JavaScript is a common requirement for web applications. Contrary to popular belief, right click is not a specific JavaScript event itself. However, it can be detected through the standard mouse events such as mousedown, mouseup, and click.

To capture right-click events, use the following logic:

document.body.onclick = function (e) {
  let isRightMB;
  e = e || window.event;

  // Determine if it is a right-click event
  if ("which" in e)  // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
    isRightMB = e.which == 3; 
  else if ("button" in e)  // IE, Opera 
    isRightMB = e.button == 2; 

  if (isRightMB) {
    // Handle right-click actions
    console.log("Right mouse button clicked!");
  }
};

On the other hand, if your goal is to detect when the right-click context menu is invoked, the appropriate event is oncontextmenu.

window.oncontextmenu = function ()
{
  // Handle context menu actions
  showCustomMenu();
  return false;     // Cancel default context menu
};

By utilizing these event handlers, you can effectively handle both mouse-based right clicks and context menu events in your JavaScript applications.

The above is the detailed content of How do you detect right-click events and handle context menus in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!