Activación del evento onclick usando el clic central

Estoy usando el onclickevento de un enlace hash para abrir <div>una ventana emergente. Pero el clic del medio no desencadena el onclickevento, solo toma el hrefvalor del atributo del enlace y carga la URL en una nueva página. ¿Cómo puedo usar el clic central para abrir el <div>como una ventana emergente?

EDITAR

Esta respuesta ha quedado obsoleta y no funciona en Chrome. Lo más probable es que termine utilizando el evento auxlink , pero consulte otras respuestas a continuación.

/EDITAR

La respuesta de Beggs es correcta, pero parece que desea evitar la acción predeterminada del clic central. En cuyo caso, incluya lo siguiente

$("#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 () detendrá la acción predeterminada del evento.

Para que se detecte el botón de clic central / rueda del mouse, debe usar el evento auxclick. P.ej:

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

Luego en su archivo de script

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

Si desea hacerlo desde JavaScript (sin usar el atributo HTML onauxclick), entonces vaya addEventListeneral 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>

Consulte la página de mdn sobre el auxclickevento aquí .

Puedes usar

event.button

para identificar en qué botón del mouse se hizo clic.

Devuelve un valor entero que indica el botón que cambió de estado.

• 0 para 'clic' estándar, generalmente botón izquierdo
• 1 para el botón central, generalmente clic con la rueda
• 2 para el botón derecho, generalmente clic derecho

Tenga en cuenta que esta convención no se sigue en Internet Explorer: consulte QuirksMode para obtener más detalles.

El orden de los botones puede ser diferente según cómo se haya configurado el dispositivo señalador.

También leer

¿En qué botón del mouse se hizo clic?

Hay dos propiedades para averiguar en qué botón del mouse se ha hecho clic: cuál y botón. Tenga en cuenta que estas propiedades no siempre funcionan en un evento de clic. Para detectar de forma segura un botón del mouse, debe usar los eventos 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>

Por lo general, odio cuando la gente ofrece alternativas en lugar de soluciones, pero como las soluciones ya se han proporcionado, voy a romper mi propia regla.

Los sitios web donde se anula la función de clic central tienden a molestarme mucho, realmente. Por lo general, hago clic en el medio porque quiero abrir el nuevo contenido en una nueva pestaña mientras tengo una vista sin obstáculos del contenido actual. Siempre que pueda dejar la funcionalidad del clic central sola y hacer que el contenido relevante esté disponible a través del atributo HREF del elemento en el que hizo clic, creo firmemente que eso es lo que debe hacer.

jQuery proporciona un .whichatributo en el evento que da la identificación del botón de clic de izquierda a derecha como 1, 2, 3. En este caso, desea 2.

Uso:

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

La respuesta de Adamantium también funcionará, pero debe tener cuidado con IE como señala:

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

También recuerde que el .buttonatributo tiene un índice 0, no un índice 1 como .which.

Esta pregunta es un poco vieja, pero encontré una solución:

$(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 no activa el evento "clic" para la rueda del mouse

Trabaja en FF y Chrome

El método adecuado es usar .on, ya que .livese ha desaprobado y luego se eliminó de jQuery:

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

O si desea la sensación de "en vivo" y #foono está en su página al inicio del documento:

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

respuesta original

Sé que llego tarde a la fiesta, pero para aquellos que todavía tienen problemas con el manejo del clic central, verifique si delega el evento. En caso de delegación, el clickevento no se dispara. Comparar:

Esto funciona para clics intermedios:

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

Esto no funciona para clics intermedios:

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

Si aún necesita rastrear el clic central usando la delegación de eventos , la única forma de evitarlo, como se indica en el ticket de jQuery correspondiente , es usar mousedowno en su mouseuplugar. Al igual que:

Esto funciona para clics intermedios 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>

Véalo en línea aquí .