How can I detect a rightmouse button event on mousedown?

Question

I am updating/debugging and expanding the capabilities of my draggable script and I need to be able to achieve the following result:

whatever.onRightMouseBut         


        

Answer 1

The HTML, Javascript and demo:

function mouseDown(e) {
  e = e || window.event;
  switch (e.which) {
    case 1: alert('left'); break;
    case 2: alert('middle'); break;
    case 3: alert('right'); break; 
  }
}

<a href="#" onmousedown="mouseDown(event);">aaa</a>

Answer 2

It's not very simple. Quirksmode.org has an article about event properties.

Look under 'Which mouse button has been clicked?' / 'Right click'. It varies by browser.

Answer 3

Normally when you have any kind of mouse event, you'll want to have it only operate on one type of mouse click. Therefore, the events passed to your callbacks have a property which allow you to distinguish between types of clicks.

This data is passed back through the button property of the event data. See MDN for finding out what values represent what data.

Therefore, you don't disable the right click, you instead only enable your functionality for the left click. Here's a [poor] example:

element.onmousedown = function(eventData) {
  if (eventData.button === 0) {
      alert("From JS: the (left?) button is down!")
  }
}  

the equivalent in jQuery is:

$("div").mousedown(function(eventData) {
    if (eventData.which === 0) {
        alert("From JQuery: which=" + de.which)
    }
});

Note that if you don't use jquery, the values returned will be different across browsers. jQuery unifies the values across browsers, using 1 for left, 2 for middle, 3 for right:

 element.onmousedown = function(eventData) {
   if (eventData.button === 0) {
     console.log("From JS: the (left?) button is down!")
   }
 }

 $("#element").ready(function() {
   $("div").mousedown(function(de) {
     console.log("From JQuery: which=" + de.which);
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element" style="width: 100px; height: 100px; background-color: blue" />