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

Comment obtenir le bouton de la souris cliqué en utilisant jQuery?

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

cela est déclenché par un clic droit et gauche, quelle est la façon de pouvoir 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.whichnormalise event.keyCodeet event.charCodevous n'avez donc pas à vous soucier des problèmes de compatibilité du navigateur. Documentation surevent.which

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

$('#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 : je l'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;
});

Démo: jsfiddle.net/Kn9s7/5

[Début du message original] 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 plusieurs solutions ^^

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

Vous pouvez facilement savoir quel bouton de la souris a été enfoncé en vérifiant la whichproprié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 aussi bindà contextmenuet return false:

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

Démo: http://jsfiddle.net/maniator/WS9S2/

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

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

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

  };
})( jQuery );

Démo: 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.

Démo: 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");
    }
});

Mise à jour de l'état actuel des choses:

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/

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

Selon l'ancienne spécification Microsoft, event.buttonles codes diffèrent de ceux utilisés par le 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 Internet plus anciens, cependant, Microsoft retourne un peu le bouton enfoncé et il y a 8 cas:

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

Malgré le fait que c'est théoriquement la façon dont cela devrait fonctionner, aucun Internet Explorer n'a jamais pris en charge les cas de deux ou trois boutons enfoncés simultanément. 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 nette:

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

EDIT: JQuery fournit un e.whichattribut, renvoyant 1, 2, 3 pour le clic gauche, central et droit respectivement. Vous pouvez donc également utiliserif (e.which == 3) { alert("right click"); }

Voir aussi: réponses à "Déclenchement d'un événement onclick en utilisant le clic du milieu"

event.which === 1 s'assure qu'il s'agit d'un clic gauche (lors de l'utilisation de jQuery).

Mais vous devriez également penser aux touches de modification: ctrlcmdshiftalt

Si vous souhaitez uniquement capturer des clics 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 recherchez des "meilleurs événements de souris Javascript" qui permettent

• mousedown gauche
• mousedown moyen
• droit de la souris
• souris gauche
• souris moyenne
• bonne souris
• click gauche
• Clic du milieu
• clic-droit
• roue de souris vers le haut
• molette vers le bas

Jetez un oeil à ce javascript normal croisé qui déclenche les événements ci-dessus et supprime le mal de tête. Copiez-le et collez-le simplement dans la tête de votre script, ou incluez-le dans un fichier <head>de votre document. Liez ensuite vos événements, reportez-vous au bloc de code suivant ci-dessous qui montre un exemple jquery de capture des événements et de déclenchement des fonctions qui leur sont attribuées, bien que cela fonctionne également avec la liaison javascript normale.

Si vous êtes intéressé à le voir fonctionner, jetez un œil au 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 exemple d'événements de clic de souris (utilise jquery pour plus de simplicité, mais ce qui précède fonctionnera dans plusieurs navigateurs et déclenchera les mêmes noms d'événements, qu'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)}();

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

    }


});

Avec jquery, vous pouvez utiliser 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");
}); 

Pour ceux qui se demandent s'ils devraient ou non utiliser event.whichdans vanilla JS ou Angular : Il est maintenant obsolète, alors préférez utiliser à la event.buttonsplace.

Remarque: Avec cette méthode et l' événement (mousedown) :

• clic gauche appuyez sur est associé à 1
• clic droit appuyez sur est associé à 2
• appuyez sur le bouton de défilement est associé à 4

et (mouseup) l' événement ne renverra PAS les mêmes chiffres mais 0 place.

Source: 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;
    });