Acionar evento onclick usando o botão do meio

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?

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.

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 .

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>

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.

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.

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

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

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 .