Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I detect a rightmouse button event on mousedown?

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.

like image 860
person0 Avatar asked Mar 01 '12 18:03

person0


People also ask

Can canvas detect right click?

In a desktop Canvas control you have two ways to handle a right mouse button press. The most common situation is that you want to show a menu when the right mouse button is pressed. You can do this using the ConstructContextualMenu and ContextualMenuAction events.

Which event is fired when the right mouse button is released?

mousedown , mouseup , and click The mousedown fires when you depress the mouse button on the element. The mouseup fires when you release the mouse button on the element.

How do I know which mouse button is clicked?

Use MouseEvent. button to detect which button has been clicked on a mouse.

Which event occurs when you click the right button of a mouse?

The right button on a mouse is typically used to provide additional information and/or properties of an item selected. For example if you highlight a word in Microsoft Word, pressing the right button will display a drop-down menu containing the cut, copy, paste, change the font etc.


3 Answers

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" />
like image 200
zastrowm Avatar answered Oct 16 '22 09:10

zastrowm


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>
like image 10
atiruz Avatar answered Oct 16 '22 09:10

atiruz


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.

like image 3
andrewmu Avatar answered Oct 16 '22 08:10

andrewmu