Utilizamos cookies propias y de terceros para proporcionarte una buena experiencia de navegación. Si sigues navegando, entendemos que aceptas su uso. Acepto


Evento click del botón del medio del ratón en javascript: Capture & Cancel

Parecía fácil capturar el click del ratón en un enlace para evitar el comportamiento por defecto del navegador. Comprobar además que el botón del medio del ratón es el que está lanzando ese evento, y sólo entonces capturar y cancelar el evento, tampoco tendría que suponer mayor problema.

En principio, algo así, debería funcionar:

$("a.enlace").on('click',function(e) {
 
    if (e.button == 1) {
        e.preventDefault();
        e.stopPropagation();
       alert("Hago lo que quiero con mi enlace");
    }
 
});

Pero parece ser que ni Firefox ni IE8 parecen cancelar el evento de click desde el botón del medio del ratón... decisión que estará justificada en estándares de accesibilidad: ¿Por qué iban a permitir que un javascript cualquiera rompiese una mejora en la usabilidad del propio navegador? Lógico a priori, pero no muy práctico.

Buscando en Google sobre el tema, se llega rápidamente hasta el artículo Javascript Madness: mouse events (en la sección "Can default mouse actions be disabled?"),  y se confirma:  el evento click desde botón del medio del ratón, no es cancelable desde Javascript, ni en Gecko (Firefox), ni en Opera (parece ser que en IE si.. será a partir de la versión 9).

A pesar de todo, seguimos necesitando esta funcionalidad. Nuestra interfaz de usuario nos pide un comportamiento diferente para el click desde el botón del medio del ratón: Necesitamos una solución (que necesariamente pasará por algo no muy elegante, como es habitual con estos temas).

Al  probar el comportamiento del navegador cuando un enlace no tiene atributo href y se hace click con el ratón, el navegador ignora dicho evento. Es más, el enlace deja de ser clickable. Buena señal!

La solución pasará por emular eso mismo: suprimir el atributo href del enlace, dejar que el navegar procese su evento click, y devolver el atributo al enlace  justo después, para que todo quede igual.

Un par de pruebas después, utilizando algo del artículo de Javascript Madness (¿Tan difícil es ponerse de acuerdo con el número que se asigna a cada botón?), aparece una solución:

$("a.enlace").on('mouseup',function(e) {
 
    // Descubrir cual de los botones se ha usado para hacer click > http://unixpapa.com/js/mouse.html
    if (event.which == null) {
        /* IE case */
	button= (event.button < 2) ? "LEFT" :
                                ((event.button == 4) ? "MIDDLE" : "RIGHT");
    } else {
        /* All others */
	button= (event.which < 2) ? "LEFT" :
	                        ((event.which == 2) ? "MIDDLE" : "RIGHT");
    }
 
    if (button == 'MIDDLE') {
        // Cancelar el evento no sirve de nada en gecko (ni en IE8 por lomenos)
        event.stopPropagation();
	event.preventDefault();
 
        // Guardamos en el contexto
        var prevHref = $(this).attr("href");
        $(this).removeAttr("href");
	var $self = $(this);
 
        setTimeout(function() {
	    $self.attr("href",prevHref);
	},100);
 
        // Al finalizar esta función, el navegador recibe el control (a pesar del preventDefault)
        // Pero el enlace está vacío y no hace nada.
        // El enlace se restaura pasados 100ms <img src='http://code.irontec.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />
        // FUNCIONA!
    }
 
});

El truco se ha testeado en Firefox7+ e IE8+ (En Windows y Linux). En Chrome (webkit), funciona directamente cancelar el evento (con "preventDefault"), aunque el apaño no parece romper nada.

Una pequeña prueba de concepto aquí: middle-click-disabled.html.

Comparte esta información:
  • Twitter
  • Facebook
  • del.icio.us
  • Meneame
  • BarraPunto
  • Google Bookmarks
  • PDF
  • email
Leave a comment

7 Comments.

  1. De todas formas, esta guay el truco :grin: . Muchas gracias!!

  2. Congos. El código funcionó como la miel. Después de usarlo, en mi sitio web everythimg funcionado a la perfección. Es bueno en el manejo de eventos. La mejor parte es, funcionó en Firefox e IE también. Gracias por el código.

  3. Hello I am so thrilled I found your site, I really found you
    by accident, while I was researching on Google for something else, Nonetheless I am here now and
    would just like to say cheers for a tremendous post and a all round thrilling blog (I also love the theme/design), I don’t
    have time to read through it all at the minute but I have bookmarked it
    and also included your RSS feeds, so when I have time
    I will be back to read a great deal more, Please do keep up the excellent jo.

  4. Clash of Clans est un jeu mobile populaire programmé par Supercell et qui
    est disponible pour les appareils iOS et Android.

  5. Hmm is anyone else experiencing problems with the images on this blog loading?

    I’m trying to find out if its a problem on my end or if
    it’s the blog. Any suggestions would be greatly appreciated.

  6. Very rapidly this web page will be famous among all
    blogging people, due to it’s fastidious articles or reviews

Leave a Reply


[ Ctrl + Enter ]