Detectar clic en el botón central (botón de desplazamiento) con jQuery

Tengo una lista con una etiqueta para reproducir algunos archivos mp3 en cliqueo. Está funcionando bien cuando se vincula el evento ‘clic’ con jQuery:

$oo.data({'__mp3play':true,'wapiHandle':h+0,'wapiIndex':o.ajaxPlayList[h].length}) .bind( 'click', function() { var wh = $j(this).data('wapiHandle'); if( typeof o.regObjects[wh] == 'object' && o.regObjects[wh].play(this.href)) { return false; } }); 

Al hacer clic con el botón izquierdo del mouse: desactiva el manejo predeterminado cuando se carga mi complemento flash, de lo contrario, se abrirá normalmente.

PERO: Cuando uso el botón de desplazamiento del mouse y hago clic en él, el evento de clic no se dispara y el enlace se abre normalmente.

He intentado usar eventos mousedown o mouseup pero no ayuda, el enlace siempre se abre normalmente con el efecto secundario de que la música comienza a reproducirse también con el reproductor flash.

También preventDefault() no funciona en absoluto.

¿Puede alguien decirme cómo detectar el botón central del mouse (clic)?

Gracias por tus comentarios.

PD: Ya he probado otras soluciones sobre el ‘botón central’ disponible en este sitio.

Probado en todo tipo de navegadores con el mismo resultado.

EDITAR: Esto tampoco funciona, el enlace se abrirá normalmente cuando se usa el botón central del mouse. Cuando se usa el botón izquierdo del mouse, no pasa nada.

 $oo.bind( 'mousedown click mouseup', function(e) { e.preventDefault(); e.stopPropagation(); return false; }); 

Bien después de una prueba rápida, parece que los tres se ordenan de la siguiente manera:

  • Izquierda – 1
  • Medio – 2
  • Derecha – 3

Entonces si tuvieras:

 $(document).mousedown(function(e){ switch(e.which) { case 1: //left Click break; case 2: //middle Click break; case 3: //right Click break; } return true;// to allow the browser to know that we handled it. }); 

Ok, creo que lo tengo. Aquí hay un violín que parece funcionar . El truco (al menos con FF4) parece ser vincular un manejador de clics al document y hacer que detenga la propagación.

 $(document).click(function(e){ //not checking for the right click will prevent the context-menu from showing, you may or may not want to do that if (e.which != 3) { e.preventDefault(); return false; } }); 

Esta solución se encontró en esta página del foro .

Bien chicos,

Gracias por su aporte. ‘@ no.good.at.coding’ tiene una buena solución pero no funciona en IE (ver más adelante), pero es un buen punto de partida. Cambio su código a esto:

 // Avoid relations will be opened in extra tab when clicking middle-scroll-button to open it $(document).bind($.browser.msie ? "mousedown" : "click", function(e) { if (e.which == 2 && e.target.tagName == 'A') { var bIE = $.browser.msie, $o = $(e.target), oe = $o.data('events'), b = true, f = function(){}; if (typeof oe == 'object' && oe['click']) { f = function(){ $o.trigger('click'); } } else { b = (typeof $o[0].href == 'string' && ($o[0].target == undefined || $o[0].target == '' || $o[0].target == '_self')); if (b) { f = function () { window.location.href=$o[0].href; }; } } if (!b) { return; } e.stopImmediatePropagation(); e.stopPropagation(); e.preventDefault(); if (bIE) { if (!window.__swcp__) { window.__swcp__= $('
').appendTo('body'); } window.__swcp__.show(); } setTimeout(f, 50); if (bIE) { setTimeout( function() { window.__swcp__.hide(); }, 1000 ); } return false; } });

El botón central actúa ahora como el botón izquierdo de un mouse. Como puede ver, IE necesita un poco más, debemos desenfocar la etiqueta de enlace durante 1 segundo para evitar que se abra en una pestaña adicional. Utilizo aquí una forma sencilla de hacer esto, crear un div transparente (a la vista = 0.01) que se colocará sobre el contenido de la ventana para que cualquier enlace en la página quede desenfocado. El usuario no notará ninguna diferencia excepto que el puntero del mouse puede cambiar de puntero a predeterminado y después de un segundo volver a puntero (solo IE). Puedo vivir con eso.

Acepto esto como una respuesta, pero si tienes una mejor idea házmelo saber.

No active acciones de clic durante el evento mousedown . Ignora el rest de la cartera de eventos y va en contra de las expectativas actuales del usuario y las prácticas de diseño.

Problema

Aquí hay un vistazo al orden normal de eventos que se activan para cada tipo de clic:

 $(document).on("mousedown mouseup click focus blur",function(e) { console.log("{" + e.which + ":" + e.type + "}"); }); 

Haga clic en Eventos

Normalmente, manejamos el último evento de click porque significa la intención final del usuario de continuar con la acción actual.

El evento de click se activa cuando se presiona y suelta un botón del dispositivo señalador ( generalmente el botón primario de un mouse ) en un solo elemento .

Desafortunadamente, las pulsaciones del medio del mouse no desencadenan dicho evento (probablemente porque hacerlo obligaría a los desarrolladores que están escuchando el evento de clic a distinguir entre múltiples invocaciones posibles). Pero si queremos enlazar las acciones con el clic del medio, debemos seguir las mismas expectativas de UX.

Solución

Escucharemos eventos de mousedown e inmediatamente adjuntaremos un controlador de uso de tiempo para eventos de mouseup . Si se presionó la tecla del medio y si los elementos coinciden, activaremos nuestro propio evento personalizado con el tipo middleclick , que se generará a partir del evento original .

 $(document).on("mousedown", function (e1) { $(document).one("mouseup", function (e2) { if (e1.which == 2 && e1.target == e2.target) { var e3 = $.event.fix(e2); e3.type = "middleclick"; $(e2.target).trigger(e3) } }); }); 

Eso ayudará a separar la determinación de si se hizo clic en el botón del medio con la forma en que queremos manejarlo en ese caso, por lo que podemos configurar un oyente para nuestro tipo de evento personalizado como este:

 $(document).on("middleclick", function (e) { console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); }); 

Demostración de trabajo en jsFiddle y Stack Snippets:

 $(document).on("mousedown", function (e1) { $(document).one("mouseup", function (e2) { if (e1.which == 2 && e1.target == e2.target) { var e3 = $.event.fix(e2); e3.type = "middleclick"; $(e2.target).trigger(e3) } }); }); $(document).on("middleclick", function (e) { console.log("{" + e.target.nodeName.toLowerCase() + ":" + e.type + "}"); }); $(document).on("mousedown mouseup click focus blur",function(e) { console.log("{" + e.which + ":" + e.type + "}"); }); 
  
Click Me!

e.which debería hacerlo:

Ejemplo simple:

 $(document).ready(function(){ $(document).mousedown(function(e){ alert(e.which); // ##=> left }) }) 

Si usted, (como yo) encontró esto debido a errores de clics medio o extraño de los clientes. Y solo quieres que el clic central o derecho se comporte como un clic izquierdo

Olvida todo ese código cojo para IE.

Corto y dulce:

 $(document).click(function(e){ // checking for any non left click and convert to left click. if (e.which != 1) { e.which = 1; } }); 

Obviamente, si necesita un poco más de discriminación, puede hacer algo como:

 $('a.no-non-left-clickies').click(function(e){ // checking for any non left click and convert to left click. if (e.which != 1) { e.which = 1; } });