Clique com o botão direito do mouse em um evento Javascript?

Clique com o botão direito do mouse em um evento Javascript? Se sim, como eu o uso?

Como outros já mencionaram, o botão direito do mouse pode ser detectado através dos eventos usuais do mouse (redução do mouse, mouseup, clique) . No entanto, se você estiver procurando por um evento de disparo quando o menu do botão direito for exibido, estará no lugar errado. O botão direito do mouse / menu de contexto também é acessível através do teclado (shift + F10 ou tecla de menu de contexto no Windows e em alguns Linux). Nessa situação, o evento que você está procurando é oncontextmenu:

window.oncontextmenu = function ()
{
    showCustomMenu();
    return false;     // cancel default menu
}

Quanto aos próprios eventos do mouse, os navegadores configuram uma propriedade para o objeto de evento que é acessível a partir da função de manipulação de eventos:

document.body.onclick = function (e) {
    var isRightMB;
    e = e || window.event;

    if ("which" in e)  // Gecko (Firefox), WebKit (Safari/Chrome) & Opera
        isRightMB = e.which == 3; 
    else if ("button" in e)  // IE, Opera 
        isRightMB = e.button == 2; 

    alert("Right mouse button " + (isRightMB ? "" : " was not") + "clicked!");
} 

window.oncontextmenu - MDC

dê uma olhada no seguinte código jQuery:

$("#myId").mousedown(function(ev){
      if(ev.which == 3)
      {
            alert("Right mouse button clicked on element with id myId");
      }
});

O valor de whichserá:

• 1 para o botão esquerdo
• 2 para o botão do meio
• 3 para o botão direito

Você pode usar o evento window.oncontextmenu, por exemplo:

window.oncontextmenu = function () {
  alert('Right Click')
}

<h1>Please Right Click here!</h1>

Sim, embora o w3c diga que o clique direito pode ser detectado pelo evento click, onClick não é acionado através do clique direito nos navegadores comuns.

De fato, clique com o botão direito apenas no gatilho onMouseDown onMouseUp e onContextMenu.

Assim, você pode considerar "onContextMenu" como o evento do botão direito. É um padrão HTML5.0.

Se você deseja detectar o clique direito do mouse, não deve usar a MouseEvent.whichpropriedade, pois ela não é padrão e há grande incompatibilidade entre os navegadores. (consulte MDN ) Você deve usar MouseEvent.button. Retorna um número representando um determinado botão:

• 0: Botão principal pressionado, geralmente o botão esquerdo ou o estado não inicializado
• 1: Botão auxiliar pressionado, geralmente o botão do volante ou o botão do meio (se houver)
• 2: Botão secundário pressionado, geralmente o botão direito
• 3: Quarto botão, geralmente o botão Voltar do navegador
• 4: Quinto botão, geralmente o botão Avançar no navegador

MouseEvent.button lida com mais tipos de entrada do que apenas o mouse padrão:

Os botões podem ser configurados de maneira diferente para o layout "da esquerda para a direita" padrão. Um mouse configurado para uso com a mão esquerda pode ter as ações do botão invertidas. Alguns dispositivos apontadores possuem apenas um botão e usam teclado ou outros mecanismos de entrada para indicar principal, secundário, auxiliar etc. Outros podem ter muitos botões mapeados para diferentes funções e valores de botão.

Referência:

1. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which
2. https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button

Não, mas você pode detectar qual botão do mouse foi usado no evento "onmousedown" ... e a partir daí determinar se foi um "clique com o botão direito".

O código a seguir está usando o jQuery para gerar um rightclickevento personalizado com base no padrão mousedowne nos mouseupeventos. Considera os seguintes pontos:

• acionar na ativação
• acionar somente quando pressionado o mouse no mesmo elemento antes
• esse código também funciona especialmente no JFX Webview (já que o contextmenuevento não é acionado lá)
• Ele não disparar quando a chave contextmenu no teclado é pressionado (como a solução com o on('contextmenu', ...)faz

$(function ()
{ // global rightclick handler - trigger custom event "rightclick"
	var mouseDownElements = [];
	$(document).on('mousedown', '*', function(event)
	{
		if (event.which == 3)
		{
			mouseDownElements.push(this);
		}
	});
	$(document).on('mouseup', '*', function(event)
	{
		if (event.which == 3 && mouseDownElements.indexOf(this) >= 0)
		{
			$(this).trigger('rightclick');
		}
	});
	$(document).on('mouseup', function()
	{
		 mouseDownElements.length = 0;
	});
    // disable contextmenu
    $(document).on('contextmenu', function(event)
	{
		 event.preventDefault();
	});
});



// Usage:
$('#testButton').on('rightclick', function(event)
{
  alert('this was a rightclick');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="testButton">Rightclick me</button>

Sim, ele é!

function doSomething(e) {
    var rightclick;
    if (!e) var e = window.event;
    if (e.which) rightclick = (e.which == 3);
    else if (e.button) rightclick = (e.button == 2);
    alert('Rightclick: ' + rightclick); // true or false
}

Sim, o oncontextmenu é provavelmente a melhor alternativa, mas saiba que ele é acionado com o mouse pressionado, enquanto o clique é acionado com o mouse para cima.

Outras questões relacionadas estavam perguntando sobre o clique duplo direito - o que aparentemente não é suportado, exceto pela verificação manual do timer. Um motivo pelo qual você pode querer clicar duas vezes com o botão direito do mouse é se você precisa / deseja oferecer suporte à entrada canhota do mouse (inversão de botão). As implementações do navegador parecem fazer muitas suposições sobre como deveríamos usar os dispositivos de entrada disponíveis.

A maneira mais fácil de fazer o clique direito é usar

 $('classx').on('contextmenu', function (event) {

 });

No entanto, essa não é uma solução entre navegadores, os navegadores se comportam de maneira diferente para esse evento, especialmente o Firefox e o IE. Eu recomendaria abaixo para uma solução entre navegadores

$('classx').on('mousedown', function (event) {
    var keycode = ( event.keyCode ? event.keyCode : event.which );
    if (keycode === 3) {
       //your right click code goes here      
    }
});

Essa é a maneira mais fácil de acioná-lo e funciona em todos os navegadores, exceto nas visualizações da web do aplicativo como (CefSharp Chromium etc ...). Espero que meu código o ajude e boa sorte!

const contentToRightClick=document.querySelector("div#contentToRightClick");

//const contentToRightClick=window; //If you want to add it into the whole document

contentToRightClick.oncontextmenu=function(e){
  e=(e||window.event);
  e.preventDefault();
  console.log(e);
  
  return false; //Remove it if you want to keep the default contextmenu 
}

div#contentToRightClick{
  background-color: #eee;
  border: 1px solid rgba(0,0,0,.2);
  overflow: hidden;
  padding: 20px;
  height: 150px;
}

<div id="contentToRightClick">Right click on the box !</div>

Se você deseja chamar a função enquanto o evento do botão direito significa que podemos usar os seguintes

 <html lang="en" oncontextmenu="func(); return false;">
 </html>

<script>
function func(){
alert("Yes");
}
</script>

Isso é trabalhado comigo

if (evt.xa.which == 3) 
{
    alert("Right mouse clicked");
}

Tente usar a propriedade whiche / oubutton

A demo

function onClick(e) {
  if (e.which === 1 || e.button === 0) {
    console.log('Left mouse button at ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 2 || e.button === 1) {
    console.log('Middle mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 3 || e.button === 2) {
    console.log('Right mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 4 || e.button === 3) {
    console.log('Backward mouse button ' + e.clientX + 'x' + e.clientY);
  }
  if (e.which === 5 || e.button === 4) {
    console.log('Forward mouse button ' + e.clientX + 'x' + e.clientY);
  }
}
window.addEventListener("mousedown", onClick);

Algumas informações aqui

Manipular evento usando a jQuerybiblioteca

$(window).on("contextmenu", function(e)
{
   alert("Right click");
})

Para manipular o botão direito do mouse, você pode usar o evento 'oncontextmenu'. Abaixo está um exemplo:

 document.body.oncontextmenu=function(event) {
     alert(" Right click! ");
 };

o código acima alerta algum texto quando o botão direito é pressionado. Se você não deseja que o menu padrão do navegador apareça, adicione return false; No final do conteúdo da função. Obrigado.

Sim, é um evento de remoção de javascript. Também existe um plugin jQuery para fazer isso