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

jquery events (16)

¿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''); });

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

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

Con jquery puedes usar el event object type

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

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:

Se hace clic en el botón izquierdo del ratón - event.button === 1
Se hace clic con el botón derecho del ratón - event.button === 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:

No se hace clic en ningún botón - event.button === 0 o 000
Se hace clic en el botón izquierdo - event.button === 1 o 001
Se presiona el botón derecho - event.button === 2 o 010
Se hace clic en los botones izquierdo y derecho - event.button === 3 o 011
Se presiona el botón event.button === 4 - event.button === 4 . event.button === 4 o 100
Se hace clic en los botones central e izquierdo - event.button === 5 o 101
Se hace clic en los botones central y derecho - event.button === 6 o 110
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.

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"

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

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

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/

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

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 )

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

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

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

$.event.special.rightclick = { bindType: "contextmenu", delegateType: "contextmenu" }; $(document).on("rightclick", "div", function() { console.log("hello"); return false; });

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

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