Cómo distinguir entre el clic izquierdo y derecho del mouse con jQuery

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

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

Esto se activa por el clic derecho y el izquierdo, ¿cuál es la forma de capturar el clic derecho del mouse? Sería feliz si algo como a continuación existe:

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

A partir de jQuery versión 1.1.3, se event.whichnormaliza event.keyCodey event.charCodeno tiene que preocuparse por problemas de compatibilidad del navegador. Documentación sobreevent.which

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

$('#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!');
    }
});

Editar : lo cambié para que funcione para elementos agregados dinámicamente usando .on()jQuery 1.7 o superior:

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

Demostració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 estés en múltiples soluciones ^^

Editar : Tim Down trae a colación un buen punto de que no siempre será un evento right-clickque desencadena el contextmenuevento, sino también cuando se presiona la tecla del menú contextual (que posiblemente sea un reemplazo para a right-click)

Puede saber fácilmente qué botón del mouse se presionó al verificar la whichpropiedad del objeto de evento en los eventos del 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! */
    }
});

También puede hacer bindque contextmenue return false:

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

Demostració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 );

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

Usando .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.

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

$("#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");
    }
});

Actualización para el estado actual de las cosas:

var $log = $("div.log");
$("div.target").on("mousedown", function() {
  $log.text("Which: " + event.which);
  if (event.which === 1) {
    $(this).removeClass("right middle").addClass("left");
  } else if (event.which === 2) {
    $(this).removeClass("left right").addClass("middle");
  } else if (event.which === 3) {
    $(this).removeClass("left middle").addClass("right");
  }
});

div.target {
  border: 1px solid blue;
  height: 100px;
  width: 100px;
}

div.target.left {
  background-color: #0faf3d;
}

div.target.right {
  background-color: #f093df;
}

div.target.middle {
  background-color: #00afd3;
}

div.log {
  text-align: left;
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="target"></div>
<div class="log"></div>

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

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

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

Hay muchas respuestas muy buenas, pero solo quiero mencionar una diferencia importante entre IE9 e IE <9 cuando uso event.button .

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

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

Sin embargo, en los exploradores de Internet más antiguos, Microsoft está cambiando un poco el botón presionado 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 central y derecho - event.button === 6 o 110
8. Se hace clic en los 3 botones, event.button === 7o 111

A pesar de que, en teoría, así es como 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 teóricamente puede soportar esto.

Me parece que una ligera adaptación de la respuesta de TheVillageIdiot sería más limpia:

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

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

Consulte también: respuestas a "Activación de evento onclick con clic medio"

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

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

Si solo está interesado en capturar clics izquierdos simples y no modificados, 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...
  }
});

Si está buscando "Mejores eventos de mouse Javascript" que permitan

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

Eche un vistazo a este JavaScript normal entre navegadores que desencadena los eventos anteriores y elimina el dolor de cabeza. Simplemente cópielo y péguelo en el encabezado de su script, o inclúyalo en un archivo en el<head> su documento. Luego, vincule sus eventos, consulte el siguiente bloque de código a continuación que muestra un ejemplo jquery de capturar los eventos y activar las funciones que se les asignaron, aunque esto también funciona con el enlace normal de JavaScript.

Si está interesado en verlo funcionar, eche un vistazo a 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 mejores eventos de clic del mouse (usa jquery para simplificar, pero lo anterior funcionará en varios navegadores y disparará los mismos nombres de eventos, IE los usa antes que 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)}();

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

$(document).ready(function () {
    var resizing = false;
    var frame = $("#frame");
    var origHeightFrame = frame.height();
    var origwidthFrame = frame.width();
    var origPosYGrip = $("#frame-grip").offset().top;
    var origPosXGrip = $("#frame-grip").offset().left;
    var gripHeight = $("#frame-grip").height();
    var gripWidth = $("#frame-grip").width();

    $("#frame-grip").mouseup(function (e) {
        resizing = false;
    });

    $("#frame-grip").mousedown(function (e) {
        resizing = true;
    });
    document.onmousemove = getMousepoints;
    var mousex = 0, mousey = 0, scrollTop = 0, scrollLeft = 0;
    function getMousepoints() {
        if (resizing) {
            var MouseBtnClick = event.which;
            if (MouseBtnClick == 1) {
                scrollTop = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop;
                scrollLeft = document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft;
                mousex = event.clientX + scrollLeft;
                mousey = event.clientY + scrollTop;

                frame.height(mousey);
                frame.width(mousex);
            }
            else {
                resizing = false;
            }
        }
        return true;

    }


});

Con jquery puedes usar event object type

jQuery(".element").on("click contextmenu", function(e){
   if(e.type == "contextmenu") {
       alert("Right click");
   }
});

¡También hay una manera de hacerlo sin JQuery!

mira esto:

document.addEventListener("mousedown", function(evt) {
    switch(evt.buttons) {
      case 1: // left mouse
      case 2: // right mouse
      case 3: // middle mouse <- I didn't tested that, I just got a touchpad
    }
});

$.fn.rightclick = function(func){
    $(this).mousedown(function(event){
        if(event.button == 2) {
            var oncontextmenu = document.oncontextmenu;
            document.oncontextmenu = function(){return false;};
            setTimeout(function(){document.oncontextmenu = oncontextmenu;},300);
            func(event);
            return false;
        }
    });
};

$('.item').rightclick(function(e){ 
    alert("item");
}); 

Para aquellos que se preguntan si deberían usarlo o no event.whichen Vanilla JS o Angular : ahora está en desuso, así que prefieren usarlo en su event.buttonslugar.

Nota: Con este método y evento (mousedown) :

• clic izquierdo se asocia a 1
• clic derecho se asocia a 2
• presionar el botón de desplazamiento está asociado con 4

y el evento (mouseup) NO devolverá los mismos números sino 0 en su lugar.

Fuente: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/buttons

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

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