Como posso detectar um evento de botão direito no mousedown? - javascript, mouseevent, arrastável, jquery-ui-arrastável, clique com o botão direito

Estou atualizando / depurando e expandindo os recursos do meu script arrastável e preciso conseguir o seguinte resultado:

whatever.onRightMouseButtonMousedown = preventDefault();

Eu fiz muitas pesquisas sem sucesso,no entanto, sei que é possível fazer isso porque quando eu uso jquery-ui draggable, ele impede a capacidade de arrastar elementos quando você move o mouse para baixo com o botão direito do mouse. Quero imitar essa capacidade e aprender como funciona para que possa implementá-la agora e no futuro, conforme necessário.

Observação:Por favor, não me dê informações sobre como usar jquery ou jquery-ui draggable (já estou familiarizado com eles), quero aprender como eles são implementados, ou como é possível implementar a detecção de um mousedown com o botão direito do mouse para evitar que os elementos sejam arrastados com o botão direito do mouse.

Respostas:

Normalmente, quando você tem qualquer tipo de evento de mouse,você vai querer que ele opere apenas com um tipo de clique do mouse. Portanto, os eventos passados ​​para seus retornos de chamada têm uma propriedade que permite a você distinguir entre os tipos de cliques.

Esses dados são passados ​​de volta por meio do botão propriedade dos dados do evento. Ver MDN para descobrir quais valores representam quais dados.

Portanto, você não desabilita o clique direito; em vez disso, você só habilita sua funcionalidade para o clique esquerdo. Aqui está um [pobre] exemplo:

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

o equivalente em jQuery é:

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

Observe que se você não usar jquery, os valores retornados serão diferentes entre os navegadores. JQuery unifica os valores entre os navegadores, usando 1 para a esquerda, 2 para o meio, 3 para a direita:

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

O html:

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

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

o demonstração.

Não é muito simples. Quirksmode.org tem um artigo sobre propriedades de eventos.

Procure em "Qual botão do mouse foi clicado?" / "Clique com o botão direito". Isso varia de acordo com o navegador.