Acionar evento onclick usando o botão do meio

90

Estou usando o onclickevento de um link com hash para abrir <div>um pop-up. Mas o clique do meio não aciona o onclickevento, mas apenas pega o hrefvalor do atributo do link e carrega o URL em uma nova página. Como posso usar o clique do meio para abrir o <div>pop-up?

Sadesh Kumar N
fonte
15
Ainda não entendo como o problema foi resolvido, quando o clique do meio não aciona o evento onclick.
Tomáš Zato - Reintegrar Monica
3
Os navegadores @TomášZato não disparam um evento 'click' com um clique do meio, mas podem disparar um evento 'mouseup'. Então, a estrutura javascript pode vincular isso a uma ação de 'clique' para confundi-lo. Recomendo a leitura de unixpapa.com/js/mouse.html
rds

Respostas:

64

EDITAR

Esta resposta foi descontinuada e não funciona no Chrome. Você provavelmente vai acabar usando o evento auxlink , mas consulte as outras respostas abaixo.

/EDITAR


A resposta de Beggs está correta, mas parece que você deseja evitar a ação padrão do clique do meio. Nesse caso, inclua o seguinte

$("#foo").on('click', function(e) {
   if (e.which == 2) {
      e.preventDefault();
      alert("middle button"); 
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="foo" href="http://example.com">middle click me</a>

preventDefault () irá parar a ação padrão do evento.

Gausie
fonte
19
Lembre-se de que .livefoi suspenso e removido em favor de.on
Naftali, também conhecido como Neal
2
Para mim, o FF funciona apenas com evento mousedown. O evento de clique chama isso de scr.hu/1kig/su5c9
100k
1
Existe alguma constante cross-browser para isso 2?
fracz de
11
Isso não funciona mais no Chrome 55. Veja 1 , 2 e esta pergunta
billc.cn
1
Como isso é uma solução quando o problema era que o clique do meio não aciona o evento de clique para começar?
Drazen Bjelovuk
31

Para que o botão do meio / roda do mouse seja detectado, você deve usar o evento auxclick. Por exemplo:

<a href="https://example.com" onauxclick="func()" id="myLink"></a>

Então, em seu arquivo de script

function func(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
}

Se você quiser fazer isso em JavaScript (sem usar o atributo HTML onauxclick), vá addEventListenerpara o elemento:

let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(e) {
  if (e.button == 1) {
    alert("middle button clicked")
  }
})
<a id="myLink" href="http://example.com">middle click me</a>

Confira a página mdn sobre o auxclickevento aqui .

Hassan
fonte
observação: onauxclick funcionará, mas não abre o link em uma nova guia ...
Jonathan Laliberte
2
Esta é a única resposta que realmente funciona no Chrome. Se precisar de um evento "click" para o botão direito do mouse, você pode usar "contextmenu" (embora não seja acionado apenas com o botão direito): developer.mozilla.org/en-US/docs/Web/API/Element/…
Humpparitari
1
combinando com a resposta acima, você pode evitar a captura do botão direito por if(event.button==1)cláusula, esta é a única resposta que funciona.
Buddy
Observe que você precisa usar o auxclickevento e verificar o valor de e.button == 1. Eu editei a resposta.
Flimm
26

Você pode usar

event.button

para identificar qual botão do mouse foi clicado.

Retorna um valor inteiro indicando o botão que mudou de estado.

  • 0 para 'clique' padrão, geralmente botão esquerdo
  • 1 para o botão do meio, geralmente clique na roda
  • 2 para o botão direito, geralmente clique com o botão direito

Observe que essa convenção não é seguida no Internet Explorer: consulte QuirksMode para obter detalhes.

A ordem dos botões pode ser diferente dependendo de como o dispositivo apontador foi configurado.

Leia também

Qual botão do mouse foi clicado?

Existem duas propriedades para descobrir qual botão do mouse foi clicado: qual e o botão. Observe que essas propriedades nem sempre funcionam em um evento de clique. Para detectar com segurança um botão do mouse, você deve usar os eventos mousedown ou mouseup.

document.getElementById('foo').addEventListener('click', function(e) {
  console.log(e.button);
  e.preventDefault();
});
<a id="foo" href="http://example.com">middle click me</a>

Rahul
fonte
4
Eu recomendo usar event.whichcomo foi padronizado em navegadores na fonte jQuery - linha 2756 -if ( !event.which && event.button ) event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
Russ Cam
2
@RussCam No entanto, MouseEvent.whichnão é definido em nenhuma especificação, mas MouseEvent.buttoné definido em Eventos DOM L2.
Oriol
@Oriol correto, mas implementado de forma diferente em diferentes fornecedores de navegadores. O OP marcou a pergunta com jQuery, por isso sugeri usar, event.whichmas deveria ter elaborado que MouseEvent.whichnão faz parte da especificação oficial.
Russ Cam
@rahul, E quanto a mouses para jogos com mais de 7 botões? egg-tech.com/blog/images/mouse%20buttons.jpg
Pacerier
Na verdade, isso não funciona em navegadores como Firefox ou Chrome, apenas para o clique principal. Veja 1 , 2 e esta pergunta .
Flimm
8

Normalmente odeio quando as pessoas oferecem alternativas em vez de soluções, mas como as soluções já foram fornecidas, vou quebrar minha própria regra.

Sites onde o recurso de clique do meio é substituído tendem a me incomodar muito, muito mesmo. Normalmente, clico com o botão do meio porque desejo abrir o novo conteúdo em uma nova guia ao mesmo tempo que tenho uma visão desobstruída do conteúdo atual. Sempre que você pode deixar a funcionalidade do botão do meio sozinha e disponibilizar o conteúdo relevante por meio do atributo HREF do seu elemento clicado, acredito fortemente que é isso que você deve fazer.

Tom Haflinger
fonte
mas e se você tiver guias em sua página da web e quiser o mesmo comportamento do seu navegador? o middleclick deve fechar uma guia existente então.
cmxl
6

jQuery fornece um .whichatributo no evento que fornece o id do botão de clique da esquerda para a direita como 1, 2, 3. Neste caso, você deseja 2.

Uso:

$("#foo").live('click', function(e) { 
   if( e.which == 2 ) {
      alert("middle button"); 
   }
}); 

A resposta de Adamantium também funcionará, mas você precisa estar atento ao IE enquanto ele observa:

$("#foo").live('click', function(e) { 
   if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) { 
     alert("middle button"); 
   } 
});

Lembre-se também de que o .buttonatributo é indexado 0 e não indexado 1 como .which.

Beggs
fonte
Posso substituir a funcionalidade do navegador Mozilla !! por exemplo, ao clicar com o botão esquerdo, ele abre uma janela pop-up .... mas para o clique do meio não abre uma janela pop-up e uma nova guia é aberta na qual a janela pop-up não está abrindo .. então eu quero substituir a funcionalidade de um clique do meio de mozilla ....
Sadesh Kumar N
O Mozilla tem uma configuração para abrir todos os pop-ups em uma nova aba ao invés de uma nova janela. Se o usuário tem essa opção ativada, então eu não acho que há qualquer coisa que você pode fazer. Se não for isso o que está acontecendo, você pode postar algum código ou um link para a página do problema?
início de
Isso não funciona em navegadores como Firefox e Chrome.
Flimm
6

Esta questão é um pouco antiga, mas encontrei uma solução:

$(window).on('mousedown', function(e) {
   if( e.which == 2 ) {
      e.preventDefault();
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

O Chrome não dispara o evento "clique" para a roda do mouse

Trabalho em FF e Chrome

Bastien Bast Weber
fonte
Não quero assumir seu caso de uso, mas apostaria dinheiro que muitas pessoas realmente precisariam do evento 'mouseup'. Ele também funciona com o botão do meio do mouse.
Bojidar Stanchev
Quando tento fazer isso no Firefox e no Chrome, não impede o comportamento padrão de abrir o link em uma nova guia, mesmo que e.preventDefault()seja chamado.
Flimm
5

O método adequado é usar .on, pois .livefoi descontinuado e removido do jQuery:

$("#foo").on('click', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

Ou se você quiser a sensação de "ao vivo" e #foonão estiver na sua página no início do documento:

$(document).on('click', '#foo', function(e) { 
   if( e.which == 2 ) {
      e.preventDefault();
      alert("middle button"); 
   }
});

resposta original

Naftali também conhecido como Neal
fonte
O evento clicknão funciona para o botão do meio do mouse em navegadores como Firefox e Chrome.
Flimm
costumava ser @Flimm
Naftali também conhecido como Neal
Sim. Stack Overflow não tem uma boa solução para respostas desatualizadas. Receio ter de votar negativamente porque "Esta resposta não é útil" mais. O que é pior é que a resposta fixada pode ter centenas ou milhares de votos negativos porque está desatualizada e ainda permanecerá fixada para sempre se o OP não estiver respondendo.
Flimm
Faça uma nova pergunta :-) (faça referência a esta dizendo que está desatualizada e você deseja uma resposta para 2020). Mas também pode usar eventos mousedown / mouseup, talvez?
Naftali também conhecido como Neal
Mesmo se eu fizer isso, pessoas como eu ainda encontrarão essa resposta quando vierem de mecanismos de pesquisa e ficarão confusas com a resposta errada fixada.
Flimm
3

Sei que estou atrasado para a festa, mas para quem ainda está com problemas em lidar com o click do meio, verifique se você delega o evento. Em caso de delegação, o clickevento não dispara. Comparar:

Isso funciona para cliques do meio:

$('a').on('click', function(){
  console.log('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>

Isso não funciona para cliques do meio:

$('div').on('click', 'a', function(){
  alert('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click here</a>
</div>

Se você ainda precisa rastrear o clique do meio usando a delegação de evento , a única maneira de contornar, conforme indicado no tíquete jQuery correspondente , é usar mousedownou em mouseupvez disso. Igual a:

Isso funciona para cliques intermediários delegados:

$('div').on('mouseup', 'a', function(){
  console.log('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href="http://example.com">middle click me</a>
</div>

Veja online aqui .

skip405
fonte
Na verdade, clicknão funciona para cliques do meio como em seu primeiro exemplo.
Flimm