How Can I Distinguish Between Left, Middle, and Right Mouse Clicks Using jQuery?

Identifying Mouse Click Type in jQuery

In JavaScript, obtaining clicks using jQuery is straightforward, but differentiating between left and right mouse clicks requires additional consideration.

To capture both clicks, jQuery provides the click event handler. However, it doesn't distinguish between the buttons.

Event Normalization with event.which

As documented, event.which normalizes event codes across browsers since jQuery version 1.1.3. It provides a consistent value:

• 1: Left mouse button
• 2: Middle mouse button
• 3: Right mouse button

Using event.which for Click Differentiation

Leveraging this, we can utilize event.which to differentiate between clicks:

$('#element').mousedown(function (event) {
  switch (event.which) {
    case 1:
      console.log('Left Mouse button pressed.');
      break;
    case 2:
      console.log('Middle Mouse button pressed.');
      break;
    case 3:
      console.log('Right Mouse button pressed.');
      break;
    default:
      console.log('Unidentified Mouse button pressed.');
  }
});

With this implementation, you can now handle left, middle, and right mouse clicks based on their respective event.which values.

The above is the detailed content of How Can I Distinguish Between Left, Middle, and Right Mouse Clicks Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!