How to Bind an Event to a Right Mouse Click and Suppress the Browser's Context Menu?

Bind Event to Right Mouse Click without Activating Browser Context Menu

Question:

How to execute a specific action when right-clicking, while preventing the default browser context menu from appearing?

Answer:

Solution 1: Using oncontextmenu Event Handler

jQuery does not provide a built-in oncontextmenu event handler. Instead, you can use the following approach:

$(document).ready(function() {
  document.oncontextmenu = function() { return false; };
});

This disables the browser context menu by canceling the oncontextmenu event in the DOM element.

Solution 2: Using jQuery mousedown Event Handler

You can capture the mousedown event using jQuery and determine which button was pressed:

$(document).ready(function() {
  $(document).mousedown(function(e) {
    if (e.button == 2) {
      // Right mouse button clicked
      alert('Right mouse button!');
      return false;
    }
    return true;
  });
});

This approach combines the disabling of the context menu with the detection of right mouse clicks.

Demo:

You can test the above solution by opening the following code example and right-clicking:

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $(document).mousedown(function(e) {
        if (e.button == 2) {
          alert('Right mouse button!');
        }
      });
    });
  </script>


  <h1 id="Test-Right-Mouse-Click-Event">Test Right Mouse Click Event</h1>

The above is the detailed content of How to Bind an Event to a Right Mouse Click and Suppress the Browser's Context Menu?. For more information, please follow other related articles on the PHP Chinese website!