javascript - example - Cómo distinguir entre el botón izquierdo y derecho del mouse con jQuery

jquery events

Question

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

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

Esto se activa con el clic derecho e izquierdo, ¿cuál es la forma de poder capturar el clic derecho? Sería feliz si existe algo como abajo:

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

Answer 1

¡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
    }
});

Answer 2

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 que dará 1, 2 o 3 para los botones izquierdo, central y derecho del mouse respectivamente, así que:

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

Answer 3

Con jquery puedes usar el event object type

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

Answer 4

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

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

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

Sin embargo, en Internet Explorer anteriores, 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 presiona 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 presiona el botón event.button === 4 - event.button === 4 . 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 === 7 o 111

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

Answer 5

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 atributo e.which , que devuelve 1, 2, 3 para los e.which izquierdo, central y derecho, respectivamente. Por lo tanto, también puede usar if (e.which == 3) { alert("right click"); } if (e.which == 3) { alert("right click"); }

Ver también: respuestas a "Activación del evento de clic con el botón central"

Answer 6

Puede saber fácilmente qué botón del mouse se presionó al verificar which propiedad 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! */
    }
});

Answer 7

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

• izquierda mousedown
• 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 abajo

Eche un vistazo a este javascript normal de navegador cruzado que activa los eventos anteriores y elimina el trabajo del dolor de cabeza. Simplemente cópielo y péguelo en el encabezado de su script, o inclúyalo en un archivo en el <head> de su documento. Luego vincule sus eventos, consulte el siguiente bloque de código a continuación que muestra un ejemplo de captura de eventos y activación de las funciones asignadas a ellos, aunque esto también funciona con el enlace de javascript normal.

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

Mejor ejemplo de eventos de clic de mouse (usa jquery por simplicidad, pero lo anterior funcionará en todos los navegadores y disparará los mismos nombres de eventos, 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 los que necesitan la versión minified ...

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

Answer 8

También puede bind al contextmenu de contextmenu y return false :

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

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

O puedes hacer un plugin 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/

Answer 9

event.which === 1 garantiza que se haga clic con el botón izquierdo (cuando se utiliza jQuery).

Pero también debes pensar en las teclas modificadoras: ctrl cmd shift alt

Si solo estás interesado en capturar clics a la izquierda simples y sin modificar, puedes 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...
  }
});

Answer 10

Edición : lo cambié para que funcione con elementos agregados dinámicamente usando .on() en 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 ^^

Edición : Tim Down muestra un buen punto de que no siempre va a ser un right-click que contextmenu evento del menú contextual, sino también cuando se presiona la tecla del menú contextual (que posiblemente sea un reemplazo para un right-click )

Answer 11

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

Answer 12

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

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

Answer 13

$(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;

    }


});

Answer 14

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

Answer 15

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

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

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

Answer 16

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