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

Posterior a consultar especialistas en esta materia, programadores de diversas áreas y maestros hemos dado con la solución al dilema y la dejamos plasmada en este post.

Solución:

Pues tras una prueba rápida parece que los tres están ordenados de la siguiente manera:

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

Así que 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.
);

Por favor no acciones de clic de disparo durante el mousedown evento. Ignora el resto de la canalización de eventos y va en contra de las expectativas y prácticas de diseño actuales del usuario.

Problema

Este es un vistazo al orden normal de los eventos que se activan para cada tipo de clic:

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

Por lo general, nos encargamos de los últimos click evento porque significa la intención final de los usuarios de continuar con la acción actual.

los click evento se dispara cuando un botón del dispositivo señalador (generalmente el botón principal de un mouse) es presionado y liberado en un elemento único.

Desafortunadamente, las presiones centrales del mouse no activan tal evento (probablemente porque hacerlo obligaría a los desarrolladores a escuchar el evento de clic para distinguir entre múltiples invocaciones posibles). Pero si queremos conectar acciones contra el clic central, debemos seguir las mismas expectativas de UX.

Solución

Escucharemos por mousedown eventos e inmediatamente adjunte un controlador de uso único para mouseup eventos. si el medio key fue presionado y si los elementos coinciden, activaremos nuestro propio evento personalizado con el tipo middleclickque sembraremos 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 si Se hizo clic en el botón central 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!

* Probado en Chrome, FF, Edge e IE11

Bien, creo que lo tengo. Aquí hay un violín que parece funcionar. El truco (al menos con FF4) parece ser vincular un controlador 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.

Puedes ayudar nuestra publicación escribiendo un comentario o dejando una puntuación te damos la bienvenida.

---

---

Utiliza Nuestro Buscador