Attivazione dell'evento onclick utilizzando il clic centrale

Sto usando l' onclickevento di un collegamento con hash per aprire <div>un popup. Ma il clic centrale non attiva l' onclickevento ma prende solo il hrefvalore dell'attributo del collegamento e carica l'URL in una nuova pagina. Come posso utilizzare il clic centrale per aprire <div>come popup?

MODIFICARE

Questa risposta è stata deprecata e non funziona su Chrome. Molto probabilmente finirai per utilizzare l' evento auxlink , ma fai riferimento alle altre risposte di seguito.

/MODIFICARE

La risposta di mendicanti è corretta, ma sembra che tu voglia impedire l'azione predefinita del clic centrale. In tal caso, includere quanto segue

$("#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 () interromperà l'azione predefinita dell'evento.

Affinché il pulsante centrale del clic / rotellina del mouse venga rilevato, è necessario utilizzare l'evento auxclick. Per esempio:

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

Quindi nel tuo file di script

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

Se vuoi farlo da JavaScript (senza usare l'attributo HTML onauxclick), allora vai addEventListenerall'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>

Controlla la pagina mdn auxclicksull'evento qui .

Puoi usare

event.button

per identificare quale pulsante del mouse è stato cliccato.

Restituisce un valore intero che indica il pulsante che ha cambiato stato.

• 0 per il "clic" standard, solitamente il pulsante sinistro
• 1 per il pulsante centrale, generalmente clic con la rotellina
• 2 per il pulsante destro, solitamente clic con il pulsante destro del mouse

Nota che questa convenzione non viene seguita in Internet Explorer: vedi QuirksMode per i dettagli.

L'ordine dei pulsanti può essere diverso a seconda di come è stato configurato il dispositivo di puntamento.

Leggi anche

Quale pulsante del mouse è stato cliccato?

Ci sono due proprietà per scoprire quale pulsante del mouse è stato cliccato: quale e pulsante. Tieni presente che queste proprietà non funzionano sempre su un evento clic. Per rilevare in modo sicuro un pulsante del mouse è necessario utilizzare gli eventi mousedown o 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>

Di solito odio quando le persone offrono alternative invece di soluzioni, ma poiché le soluzioni sono già state fornite infrangerò la mia regola.

I siti web in cui la funzione di clic centrale è sovrascritta tendono a infastidirmi davvero. Di solito faccio clic con il pulsante centrale perché desidero aprire il nuovo contenuto in una nuova scheda pur avendo una visione senza ostacoli del contenuto corrente. Ogni volta che puoi lasciare da sola la funzionalità del clic centrale e rendere disponibile il contenuto pertinente tramite l'attributo HREF del tuo elemento cliccato, credo fermamente che sia quello che dovresti fare.

jQuery fornisce un .whichattributo sull'evento che fornisce l'id del pulsante di clic da sinistra a destra come 1, 2, 3. In questo caso si desidera 2.

Utilizzo:

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

Anche la risposta di Adamantium funzionerà, ma devi stare attento a IE mentre osserva:

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

Ricorda anche che l' .buttonattributo è 0-indicizzato non 1-indicizzato come .which.

Questa domanda è un po 'vecchia, ma ho trovato una soluzione:

$(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>

Chrome non attiva l'evento "clic" per la rotellina del mouse

Lavora in FF e Chrome

Il metodo corretto è quello di utilizzare .on, poiché .liveè stato deprecato e quindi rimosso da jQuery:

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

O se vuoi la sensazione "live" e #foonon è sulla tua pagina all'inizio del documento:

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

risposta originale

So di essere in ritardo per la festa, ma per coloro che hanno ancora problemi con la gestione del clic centrale, controlla se deleghi l'evento. In caso di delega, l' clickevento non si attiva. Confrontare:

Funziona per i clic centrali:

$('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>

Questo non funziona per i clic centrali:

$('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 hai ancora bisogno di monitorare il clic centrale utilizzando la delega dell'evento , l'unico modo per aggirare, come indicato nel ticket jQuery corrispondente , è utilizzare mousedowno mouseupinvece. Così:

Funziona per i clic centrali delegati:

$('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>

Guardalo online qui .