Acionando o evento onclick usando o clique do meio

Estou usando o evento onclick de um link com hash para abrir um

como pop-up. Mas o clique do meio não aciona o evento onclick , mas apenas pega o valor do atributo href do link e carrega o URL em uma nova página. Como posso usar o clique do meio para abrir o

como um pop-up?

A resposta do beggs está correta, mas parece que você quer evitar a ação padrão do clique do meio. Nesse caso, inclua os seguintes

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

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

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, normalmente clique da 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ê precisa usar os events mousedown ou mouseup.

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

 $(window).on('mousedown', function(e) { if( e.which == 2 ) { e.preventDefault(); } }); 

O Chrome não triggers o evento “click” para a roda do mouse

Trabalhe em FF e Chrome

Eu geralmente odeio quando as pessoas oferecem alternativas em vez de soluções, mas desde que as soluções já foram fornecidas eu vou quebrar minha própria regra.

Sites onde o recurso de clique do meio é substituído tendem a realmente me incomodar. Normalmente, estou clicando com o botão do meio porque quero abrir o novo conteúdo em uma nova guia enquanto tenho uma visão desobstruída do conteúdo atual. Sempre que você puder deixar a funcionalidade de clique do meio sozinha e disponibilizar o conteúdo relevante por meio do atributo HREF do elemento clicado, acredito firmemente que é isso que você deve fazer.

O jQuery fornece um atributo .which no evento que dá o id do botão click da esquerda para a direita como 1, 2, 3. Nesse caso, você quer 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, conforme 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 que o atributo .button é indexado em 0, não indexado em 1, como .which .

O método adequado é usar .live , já que .live foi descontinuado e removido do jQuery:

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

Ou se você quiser o “ao vivo” como sentir e #foo não está 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

Para o botão do clique do meio / botão do mouse ser detectado, você tem que usar o auxclick do evento. Por exemplo:

  

Então no seu arquivo de script

 func() { alert("middle button clicked") } 

Se você quiser fazer isso do JavaScript, addEventListener ao elemento:

 let myLink = document.getElementById('myLink') myLink.addEventListener('auxclick', function(event) { alert("middle button clicked") }) 

Confira a página mdn sobre o evento auxclick aqui .

Eu sei que estou atrasado para a festa, mas para aqueles que ainda estão tendo problemas em lidar com o clique do meio, verifique se você delegou o evento. Em caso de delegação, o evento click não é acionado. Comparar:

Isso funciona para cliques do meio:

 $('a').on('click', function(){ console.log('middle click'); }); 

Isso não funciona para cliques do meio:

 $('div').on('click', 'a', function(){ console.log('middle click'); }); 

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

Isso funciona para cliques médios delegates:

 $('div').on('mouseup', 'a', function(){ console.log('middle click'); }); 

Veja on-line aqui .