Como você obtém o botão do mouse clicado usando o jQuery?
$('div').bind('click', function(){
alert('clicked');
});
isso é acionado pelo clique direito e esquerdo, qual é a maneira de conseguir capturar o botão direito do mouse? Ficaria feliz se existir algo como abaixo:
$('div').bind('rightclick', function(){
alert('right mouse button is pressed');
});
contextmenu
é nativo do navegador. em JavaScript nativo, você pode anexar aooncontextmenu
evento.Edit : Eu mudei para trabalhar com elementos adicionados dinamicamente usando
.on()
no jQuery 1.7 ou superior:Demonstração: jsfiddle.net/Kn9s7/5
[Início da postagem original] Foi o que funcionou para mim:
Caso você esteja em várias soluções ^^
Edit : Tim Down traz um bom ponto de vista que nem sempre será o
right-click
que aciona ocontextmenu
evento, mas também quando a tecla do menu de contexto é pressionada (o que é provavelmente um substituto para umright-click
)fonte
contextmenu
disparo do evento nem sempre implica que o botão direito do mouse foi clicado. A abordagem correta é obter informações do botão de um evento de mouse (click
neste caso).Você pode dizer com facilidade qual botão do mouse foi pressionado verificando a
which
propriedade do objeto de evento nos eventos do mouse:fonte
e.button==2
.event.button
o navegador cruzado é mais um problema doevent.which
que os números usados para os botõesevent.button
variam. Dê uma olhada neste artigo de janeiro de 2009 - unixpapa.com/js/mouse.htmlmouseup
verificar se uma pessoa realmente clicou no item? Muitas vezes, se eu clicar acidentalmente em algo, sou capaz de impedir o clique pressionando o botão do mouse e arrastando para fora do elemento.mouseup
é provavelmente um evento melhor, este é apenas um exemplo do uso deevent.which
cliques no botão do mouse #Você também pode
bind
paracontextmenu
ereturn false
:Demonstração: http://jsfiddle.net/maniator/WS9S2/
Ou você pode criar um plugin rápido que faça o mesmo:
Demonstração: http://jsfiddle.net/maniator/WS9S2/2/
Usando
.on(...)
jQuery> = 1.7:Demo: http://jsfiddle.net/maniator/WS9S2/283/
fonte
method.call(this, e);
vez demethod();
Dessa forma,method
obtém o valor corretothis
e também tem o objeto de evento passado corretamente.Atualização para o estado atual das coisas:
fonte
event.which
foi introduzido, o que elimina a compatibilidade entre navegadores.http://jsfiddle.net/SRX3y/8/
fonte
Há muitas respostas muito boas, mas eu só quero tocar em uma grande diferença entre o IE9 e o IE <9 ao usar
event.button
.De acordo com a especificação antiga da Microsoft para
event.button
os códigos diferem dos usados pelo W3C. O W3C considera apenas 3 casos:event.button === 1
event.button === 3
event.button === 2
No Internet Explorer mais antigo, no entanto, a Microsoft está pressionando um pouco o botão pressionado e há 8 casos:
event.button === 0
ou 000event.button === 1
ou 001event.button === 2
ou 010event.button === 3
ou 011event.button === 4
ou 100event.button === 5
ou 101event.button === 6
ou 110event.button === 7
ou 111Apesar de teoricamente ser assim que deve funcionar, nenhum Internet Explorer suportou os casos de dois ou três botões pressionados simultaneamente. Estou mencionando isso porque o padrão W3C não pode nem mesmo apoiar isso teoricamente.
fonte
event.button === 0
que não clica em nenhum botão. IEಠ_ಠ
Parece-me que uma leve adaptação da resposta de TheVillageIdiot seria mais limpa:
EDIT: JQuery fornece um
e.which
atributo, retornando 1, 2, 3 para clique esquerdo, do meio e direito, respectivamente. Então você também pode usarif (e.which == 3) { alert("right click"); }
Consulte também: respostas para "Disparando o evento ao clicar usando o botão do meio"
fonte
event.which === 1
garante um clique esquerdo (ao usar o jQuery).Mas você também deve pensar nas teclas modificadoras: ctrlcmdshiftalt
Se você estiver interessado apenas em capturar cliques simples e não modificados, faça algo assim:
fonte
Se você está procurando "Eventos de mouse Javascript melhores", que permitem
Dê uma olhada neste javascript normal em vários navegadores, que aciona os eventos acima e remove o trabalho de dor de cabeça. Apenas copie e cole no cabeçalho do seu script ou inclua-o em um arquivo no diretório
<head>
seu documento. Em seguida, vincule seus eventos, consulte o próximo bloco de código abaixo, que mostra um exemplo jquery de capturar os eventos e disparar as funções atribuídas a eles, embora isso funcione também com a ligação javascript normal.Se você estiver interessado em vê-lo funcionar, consulte o jsFiddle: https://jsfiddle.net/BNefn/
Exemplo de eventos com melhor clique do mouse (usa jquery por simplicidade, mas o acima funcionará em vários navegadores e disparará os mesmos nomes de eventos, o IE usa antes dos nomes)
E para aqueles que precisam da versão reduzida ...
fonte
fonte
fonte
Com jquery você pode usar
event object type
fonte
também há uma maneira de fazer isso sem o JQuery!
Veja isso:
fonte
fonte
Para aqueles que estão se perguntando se eles devem ou não usar
event.which
em baunilha JS ou angular : É agora obsoleto por isso preferem usarevent.buttons
em seu lugar.Nota: Com este método e o evento (mousedown) :
e o evento (mouseup) NÃO retornará os mesmos números, mas 0 .
Fonte: https://developer.mozilla.org/pt-BR/docs/Web/API/MouseEvent/buttons
fonte
fonte