¿Cómo puedo detectar un evento de botón de botón derecho en el mousedown?

Question

Estoy actualizando/depuración y la expansión de las capacidades de mi script que pueden arrastrarse y tengo que ser capaz de lograr el siguiente resultado:

whatever.onRightMouseButtonMousedown = preventDefault(); 

he hecho un gran trabajo de investigación en vano, sin embargo, sé que es posible hacer esto porque cuando utilizo jquery-ui se puede arrastrar, impide la capacidad de arrastrar elementos cuando haces un mousedown con el botón derecho del mouse. Quiero imitar esta habilidad y aprender cómo funciona para poder implementarla ahora y en el futuro según sea necesario.

Nota: No me brinde información sobre cómo usar jquery o jquery-ui draggable (ya estoy familiarizado con él), quiero aprender cómo implementaron, o cómo es posible implementar la detección de un mousedown con el botón derecho del mouse para que pueda evitar que los elementos se draguen con el botón derecho del mouse.

Answer 1

Normalmente, cuando tiene algún tipo de evento de mouse, querrá que solo funcione con un solo clic del mouse. Por lo tanto, los eventos pasados ​​a sus callbacks tienen una propiedad que le permite distinguir entre tipos de clics.

Estos datos se devuelven a través del botón propiedad de los datos del evento. Consulte MDN para averiguar qué valores representan qué datos.

Por lo tanto, no desactiva el clic derecho, en su lugar solo habilita su funcionalidad para el clic izquierdo. He aquí una [pobres] ejemplo:

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

el equivalente en jQuery es:

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

Tenga en cuenta que si no se utiliza jQuery, los valores devueltos serán diferentes en todos los navegadores. jQuery unifies the values across browsers, usando 1 para la izquierda, 2 para medio, 3 para derecha:

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" />

Answer 2

No es muy simple. Quirksmode.org tiene un article about event properties.

Busque en "¿Qué botón del mouse ha hecho clic?"/'Botón derecho del ratón'. Varía según el navegador.

Answer 3

El html:

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

El javascript:

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; 
    } 
}​ 

El demo.