Pregunta Cómo distinguir entre hacer clic con el botón izquierdo y derecho con jQuery


¿Cómo se obtiene el botón del mouse con el botón jQuery?

$('div').bind('click', function(){
    alert('clicked');
});

esto se desencadena tanto con el clic derecho como con el izquierdo, ¿cuál es la manera de poder hacer clic con el botón derecho del mouse? Estaría feliz si algo como lo siguiente existe:

$('div').bind('rightclick', function(){ 
    alert('right mouse button is pressed');
});

534
2017-07-30 12:11


origen


Respuestas:


A partir de jQuery versión 1.1.3, event.which normaliza event.keyCode y event.charCode para que no tenga que preocuparse por los problemas de compatibilidad del navegador. Documentación sobre event.which

event.which dará 1, 2 o 3 para los botones izquierdo, medio y derecho del mouse, respectivamente, así:

$('#element').mousedown(function(event) {
    switch (event.which) {
        case 1:
            alert('Left Mouse button pressed.');
            break;
        case 2:
            alert('Middle Mouse button pressed.');
            break;
        case 3:
            alert('Right Mouse button pressed.');
            break;
        default:
            alert('You have a strange Mouse!');
    }
});

833
2018-04-27 23:52



Editar: Lo cambié a trabajar para elementos añadidos dinámicamente usando .on() en jQuery 1.7 o superior:

$(document).on("contextmenu", ".element", function(e){
   alert('Context Menu event has fired!');
   return false;
});

Manifestación: jsfiddle.net/Kn9s7/5

[Inicio de la publicación original] Esto es lo que funcionó para mí:

$('.element').bind("contextmenu",function(e){
   alert('Context Menu event has fired!');
   return false;
}); 

En caso de que tenga múltiples soluciones ^^

Editar: Tim Down muestra un buen punto que no siempre va a ser una right-click que dispara el contextmenu evento, pero también cuando se presiona la tecla de menú contextual (que es sin duda un reemplazo para un right-click)


241
2018-02-10 22:16



Puede ver fácilmente qué botón del mouse presionó al marcar which propiedad del objeto de evento en eventos de mouse:

/*
  1 = Left   mouse button
  2 = Centre mouse button
  3 = Right  mouse button
*/

$([selector]).mousedown(function(e) {
    if (e.which === 3) {
        /* Right mouse button was clicked! */
    }
});

79
2017-10-29 22:20



Tú también puedes bind a contextmenu y return false:

$('selector').bind('contextmenu', function(e){
    e.preventDefault();
    //code
    return false;
});

Manifestación: http://jsfiddle.net/maniator/WS9S2/

O puede hacer un complemento rápido que haga lo mismo:

(function( $ ) {
  $.fn.rightClick = function(method) {

    $(this).bind('contextmenu rightclick', function(e){
        e.preventDefault();
        method();
        return false;
    });

  };
})( jQuery );

Manifestación: http://jsfiddle.net/maniator/WS9S2/2/


Utilizando .on(...) jQuery> = 1.7:

$(document).on("contextmenu", "selector", function(e){
    e.preventDefault();
    //code
    return false;
});  //does not have to use `document`, it could be any container element.

Manifestación: http://jsfiddle.net/maniator/WS9S2/283/ 


37
2017-12-13 15:26



$("#element").live('click', function(e) {
  if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
       alert("Left Button");
    }
    else if(e.button == 2){
       alert("Right Button");
    }
});


30
2017-07-30 12:18



$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

$(document).on("rightclick", "div", function() {
    console.log("hello");
    return false;
});

http://jsfiddle.net/SRX3y/8/


18
2017-08-14 13:09



Hay muchas respuestas muy buenas, pero solo quiero tocar una gran diferencia entre IE9 e IE <9 al usar event.button.

De acuerdo con la antigua especificación de Microsoft para event.button los códigos difieren de los usados ​​por W3C. W3C considera solo 3 casos:

  1. Se hace clic en el botón izquierdo del mouse - event.button === 1
  2. Se presiona el botón derecho del mouse - event.button === 3
  3. Se hace clic en el botón central del mouse - event.button === 2

En Internet Explorers más antiguos, sin embargo, Microsoft está cambiando un poco el botón y hay 8 casos:

  1. No se hace clic en ningún botón - event.button === 0 o 000
  2. Se hace clic en el botón izquierdo - event.button === 1 o 001
  3. Se hace clic en el botón derecho - event.button === 2 o 010
  4. Se hace clic en los botones izquierdo y derecho - event.button === 3 o 011
  5. Se hace clic en el botón central - event.button === 4 o 100
  6. Se hace clic en los botones central e izquierdo - event.button === 5 o 101
  7. Se hace clic en los botones medios y derechos - event.button === 6 o 110
  8. Se hacen clic en los 3 botones: event.button === 7 o 111

A pesar de que, en teoría, esto es lo que debería funcionar, ningún Internet Explorer ha admitido los casos de dos o tres botones presionados simultáneamente. Lo estoy mencionando porque el estándar W3C ni siquiera puede soportarlo teóricamente.


14
2017-10-26 14:31



Me parece que una pequeña adaptación de la respuesta de TheVillageIdiot sería más clara:

$('#element').bind('click', function(e) {
  if (e.button == 2) {
    alert("Right click");
  }
  else {
    alert("Some other click");
  }
}

EDITAR: JQuery proporciona una e.which atributo, devolviendo 1, 2, 3 para clic izquierdo, medio y derecho, respectivamente. Entonces también podrías usar if (e.which == 3) { alert("right click"); }

Ver también: respuestas a "Activación del evento onclick con un clic medio"


8
2017-12-18 18:49



event.which === 1asegura que es un clic izquierdo (cuando se usa jQuery).

Pero también debes pensar en las teclas modificadoras: ctrlcmdcambioalt

Si solo está interesado en obtener clics izquierdos simples sin modificar, puede hacer algo como esto:

var isSimpleClick = function (event) {
  return !(
    event.which !== 1 || // not a left click
    event.metaKey ||     // "open link in new tab" (mac)
    event.ctrlKey ||     // "open link in new tab" (windows/linux)
    event.shiftKey ||    // "open link in new window"
    event.altKey         // "save link as"
  );
};

$('a').on('click', function (event) {
  if (isSimpleClick(event)) {
    event.preventDefault();
    // do something...
  }
});

3
2018-05-08 10:25



Si está buscando "Mejores eventos de Mouse con Javascript" que permitan

  • left mousedown
  • mousedown medio
  • right mousedown
  • left mouseup
  • mouseup medio
  • right mouseup
  • click izquierdo
  • medio clic
  • botón derecho del ratón
  • mueve hacia arriba la ruleta del ratón
  • rueda del mouse hacia abajo

Eche un vistazo a este navegador cruzado javascript normal que desencadena los eventos anteriores y elimina el dolor de cabeza. Solo copie y pegue en el encabezado de su script, o inclúyalo en un archivo en el <head> de su documento. A continuación, vincule sus eventos, consulte el siguiente bloque de código a continuación, que muestra un ejemplo de jquery para capturar los eventos y activar las funciones asignadas a ellos, aunque esto también funciona con el enlace normal de JavaScript.

Si le interesa verlo funcionar, eche un vistazo al jsFiddle: https://jsfiddle.net/BNefn/

/**
   Better Javascript Mouse Events
   Author: Casey Childers
**/
(function(){
    // use addEvent cross-browser shim: https://gist.github.com/dciccale/5394590/
    var addEvent = function(a,b,c){try{a.addEventListener(b,c,!1)}catch(d){a.attachEvent('on'+b,c)}};

    /* This function detects what mouse button was used, left, right, middle, or middle scroll either direction */
    function GetMouseButton(e) {
        e = window.event || e; // Normalize event variable

        var button = '';
        if (e.type == 'mousedown' || e.type == 'click' || e.type == 'contextmenu' || e.type == 'mouseup') {
            if (e.which == null) {
                button = (e.button < 2) ? "left" : ((e.button == 4) ? "middle" : "right");
            } else {
                button = (e.which < 2) ? "left" : ((e.which == 2) ? "middle" : "right");
            }
        } else {
            var direction = e.detail ? e.detail * (-120) : e.wheelDelta;
            switch (direction) {
                case 120:
                case 240:
                case 360:
                    button = "up";
                break;
                case -120:
                case -240:
                case -360:
                    button = "down";
                break;
            }
        }

        var type = e.type
        if(e.type == 'contextmenu') {type = "click";}
        if(e.type == 'DOMMouseScroll') {type = "mousewheel";}

        switch(button) {
            case 'contextmenu':
            case 'left':
            case 'middle':
            case 'up':
            case 'down':
            case 'right':
                if (document.createEvent) {
                  event = new Event(type+':'+button);
                  e.target.dispatchEvent(event);
                } else {
                  event = document.createEventObject();
                  e.target.fireEvent('on'+type+':'+button, event);
                }
            break;
        }
    }

    addEvent(window, 'mousedown', GetMouseButton);
    addEvent(window, 'mouseup', GetMouseButton);
    addEvent(window, 'click', GetMouseButton);
    addEvent(window, 'contextmenu', GetMouseButton);

    /* One of FireFox's browser versions doesn't recognize mousewheel, we account for that in this line */
    var MouseWheelEvent = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
    addEvent(window, MouseWheelEvent, GetMouseButton);
})();

Ejemplo de mejor clic de ratón (utiliza jquery por simplicidad, pero lo anterior funcionará en el navegador cruzado y activará los mismos nombres de evento, IE usa antes de los nombres)

<div id="Test"></div>
<script type="text/javascript">
    $('#Test').on('mouseup',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:left',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:middle',function(e){$(this).append(e.type+'<br />');})
              .on('mouseup:right',function(e){$(this).append(e.type+'<br />');})

              .on('click',function(e){$(this).append(e.type+'<br />');})
              .on('click:left',function(e){$(this).append(e.type+'<br />');})
              .on('click:middle',function(e){$(this).append(e.type+'<br />');})
              .on('click:right',function(e){$(this).append(e.type+'<br />');})

              .on('mousedown',function(e){$(this).html('').append(e.type+'<br />');})
              .on('mousedown:left',function(e){$(this).append(e.type+'<br />');})
              .on('mousedown:middle',function(e){$(this).append(e.type+'<br />');})
              .on('mousedown:right',function(e){$(this).append(e.type+'<br />');})

              .on('mousewheel',function(e){$(this).append(e.type+'<br />');})
              .on('mousewheel:up',function(e){$(this).append(e.type+'<br />');})
              .on('mousewheel:down',function(e){$(this).append(e.type+'<br />');})
              ;
</script>

Y para aquellos que necesitan la versión minificada ...

!function(){function e(e){e=window.event||e;var t="";if("mousedown"==e.type||"click"==e.type||"contextmenu"==e.type||"mouseup"==e.type)t=null==e.which?e.button<2?"left":4==e.button?"middle":"right":e.which<2?"left":2==e.which?"middle":"right";else{var n=e.detail?-120*e.detail:e.wheelDelta;switch(n){case 120:case 240:case 360:t="up";break;case-120:case-240:case-360:t="down"}}var c=e.type;switch("contextmenu"==e.type&&(c="click"),"DOMMouseScroll"==e.type&&(c="mousewheel"),t){case"contextmenu":case"left":case"middle":case"up":case"down":case"right":document.createEvent?(event=new Event(c+":"+t),e.target.dispatchEvent(event)):(event=document.createEventObject(),e.target.fireEvent("on"+c+":"+t,event))}}var t=function(e,t,n){try{e.addEventListener(t,n,!1)}catch(c){e.attachEvent("on"+t,n)}};t(window,"mousedown",e),t(window,"mouseup",e),t(window,"click",e),t(window,"contextmenu",e);var n=/Firefox/i.test(navigator.userAgent)?"DOMMouseScroll":"mousewheel";t(window,n,e)}();

1
2017-12-31 10:50



$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});

1
2017-10-24 21:38