Comment faire une distinction entre le clic gauche et droit de la souris avec jQuery

Comment obtenez-vous le bouton de la souris à l'aide de jQuery?

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

Ceci est déclenché à la fois par le clic droit et le clic droit, quelle est la manière d'attraper le clic droit de la souris? Je serais heureux si quelque chose comme ci-dessous existe:

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

À partir de jQuery version 1.1.3, event.which normalise event.keyCode et event.charCode afin de ne pas vous soucier des problèmes de compatibilité du navigateur. Documentation sur event.which

event.which donnera respectivement 1, 2 ou 3 pour les boutons gauche, moyen et droit de la souris, respectivement:

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

Edit : J'ai changé pour fonctionner pour les éléments ajoutés dynamiquement en utilisant .on() dans jQuery 1.7 ou supérieur:

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

Demo: jsfiddle.net/Kn9s7/5

[Début de la publication originale] C'est ce qui a fonctionné pour moi:

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

Dans le cas où vous êtes dans des solutions multiples ^^

Edit : Tim Down soulève un bon point pour que ce ne soit pas toujours un right-click qui déclenche l'événement contextmenu , mais aussi lorsque la touche de menu contextuel est pressée (ce qui est sans doute un remplacement pour un right-click )

Vous pouvez facilement indiquer quel bouton de la souris a été pressé en cochant la propriété de l'objet événement sur les événements de la souris:

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

Vous pouvez également bind à contextmenu et return false :

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

Demo: http://jsfiddle.net/maniator/WS9S2/

Ou vous pouvez créer un plugin rapide qui fait la même chose:

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

Demo: http://jsfiddle.net/maniator/WS9S2/2/


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

Demo: 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"); } }); 
 $.event.special.rightclick = { bindType: "contextmenu", delegateType: "contextmenu" }; $(document).on("rightclick", "div", function() { console.log("hello"); return false; }); 

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

Il y a beaucoup de très bonnes réponses, mais je veux juste aborder une différence majeure entre IE9 et IE <9 lors de l'utilisation du event.button .

Selon l'ancienne spécification Microsoft for event.button les codes diffèrent de ceux utilisés par W3C. Le W3C ne considère que 3 cas:

  1. Le bouton gauche de la souris est cliqué – event.button === 1
  2. Le bouton droit de la souris est cliqué – event.button === 3
  3. Le bouton central de la souris est cliqué – event.button === 2

Dans les Explorateurs d'Internet plus anciens, Microsoft lance un peu le bouton pressé et il y a 8 cas:

  1. Aucun bouton n'est cliqué – event.button === 0 ou 000
  2. Le bouton gauche est cliqué – event.button === 1 ou 001
  3. Le bouton droit est cliqué – event.button === 2 ou 010
  4. Les boutons gauche et droit sont cliqués – event.button === 3 ou 011
  5. Le bouton central est cliqué – event.button === 4 ou 100
  6. Les boutons du milieu et de gauche sont cliqués – event.button === 5 ou 101
  7. Les boutons du milieu et de droite sont cliqués – event.button === 6 ou 110
  8. Tous les 3 boutons sont cliqués – event.button === 7 ou 111

Malgré le fait que c'est théoriquement, comment Internet fonctionne, aucun Internet Explorer n'a supporté les cas de deux ou trois boutons simultanément pressés. Je le mentionne parce que la norme W3C ne peut même pas théoriquement supporter cela.

Il me semble qu'une légère adaptation de la réponse de TheVillageIdiot serait plus propre:

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

EDIT: JQuery fournit un attribut e.which , renvoyant 1, 2, 3 pour gauche, milieu et clic droit, respectivement. Ainsi, vous pouvez également utiliser if (e.which == 3) { alert("right click"); } if (e.which == 3) { alert("right click"); }

Voir aussi: réponses à "Déclencher l'événement onclick en utilisant le clic central"

event.which === 1 garantit que c'est un clic gauche (lors de l'utilisation de jQuery).

Mais vous devriez également penser aux touches modificatrices: ctrl cmd shift alt

Si vous n'êtes intéressé que par des clics de gauche simples et non modifiés, vous pouvez faire quelque chose comme ceci:

 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 vous êtes à la recherche de "Better Javascript Mouse Events" qui permettent

  • Gauche mousedown
  • Mousedown moyen
  • Droit mousedown
  • Left mouseup
  • Middle Mouseup
  • Right mouseup
  • click gauche
  • Clic du milieu
  • clic-droit
  • Roulette de souris
  • Roue de la souris vers le bas

Jetez un oeil à ce javascript normal de navigateur croisé qui déclenche les événements ci-dessus et supprime le travail de la tête de tête. Il suffit de copier et de le coller dans la tête de votre script, ou de l'inclure dans un fichier dans <head> de votre document. Ensuite, liez vos événements, reportez-vous au prochain bloc de code ci-dessous qui montre un exemple jquery de capture des événements et de déclenchement des fonctions qui leur sont assignées, mais cela fonctionne également avec la liaison javascript normale.

Si vous souhaitez le voir, regardez 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); })(); 

Meilleur Mouse Click Events Example (utilise jquery pour la simplicité, mais ce qui précède fonctionnera dans le navigateur croisé et déclenchera les mêmes noms d'événement, IE utilise avant les noms)

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

Et pour ceux qui ont besoin de la version minifiée …

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

Avec jquery, vous pouvez utiliser le event object type

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

Il y a aussi un moyen de le faire sans JQuery!

regarde ça:

 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"); }); 
  $.event.special.rightclick = { bindType: "contextmenu", delegateType: "contextmenu" }; $(document).on("rightclick", "div", function() { console.log("hello"); return false; });