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.onRightMouseButtonMousedown = preventDefault();

I have done a lot of research to no avail, however, I know that it is possible to do this because when I use jquery-ui draggable, it prevents the ability to drag elements when you mousedown with the right mouse button. I want to mimic this ability, and learn how it works so that I can implement it now and in the future as needed.

Note: Please do not give me information about how to use jquery or jquery-ui draggable (I already am familiar with it), I want to learn how they implemented, or how it is possible to implement the detection of a mousedown with the right mouse button so that I can prevent elements from being draged with the right mouse button.

Answer 1

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=" + eventData.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" />