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

Edit : Je l'ai modifié pour travailler pour des éléments ajoutés dynamiquement en utilisant .on() dans jQuery 1.7 ou plus:

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

Démo: jsfiddle.net/Kn9s7/5

[début du post 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 des solutions multiples ^ ^

Modifier : Tim Bas apporte un bon point que ce ne sera 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 dire quel bouton de la souris a été pressé en cochant la propriété which de l'objet d'é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 à contextmenu et return false :

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

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

ou vous pouvez faire 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 );

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

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

selon L'ancienne spécification de Microsoft pour 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 du centre de la souris est cliqué - event.button === 2

dans les plus anciens explorateurs D'Internet cependant Microsoft sont un peu pour le bouton pressé et il ya 8 cas:

1. Pas de bouton est cliqué event.button === 0 ou 000
2. bouton gauche est cliqué - event.button === 1 ou 001
3. bouton droit est cliqué - event.button === 2 ou 010
4. gauche et droite les boutons sont cliqués - event.button === 3 ou 011
5. le bouton du milieu est cliqué - event.button === 4 ou 100
6. les boutons du Centre et de gauche sont cliqués - event.button === 5 ou 101
7. les boutons central et droit sont cliqués - event.button === 6 ou 110
8. les 3 boutons sont cliqués - event.button === 7 ou 111

malgré le fait que c'est théoriquement comment cela devrait fonctionner, aucun Internet Explorer a déjà 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 soutenir cela en théorie.

il me semble qu'une légère adaptation de la réponse de Lavillageidiot 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 , retournant 1, 2, 3 pour le clic gauche, le milieu et le droit respectivement. Ainsi, vous pouvez également utiliser if (e.which == 3) { alert("right click"); }

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

event.which === 1 assure que c'est un clic gauche (en utilisant jQuery).

mais vous devriez aussi penser aux touches modificatrices: ctrl cmd shift alt

si vous êtes seulement intéressé à attraper simple, un clic gauche non modifié, 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 "de meilleurs événements Javascript pour la souris" qui permettent de

• de gauche " mousedown
• moyen mousedown
"151970920 de droite" mousedown
• mouseup gauche
• moyen mouseup
• mouseup de droite
• clic gauche
• milieu de cliquer sur
• clic droit
• la roulette de la souris augmentation de 151980920"
• la roulette de la souris vers le bas

regardez ce javascript normal de cross browser qui déclenche les événements ci-dessus, et supprime le travail de casse-tête. Il suffit de copier et de la coller dans la tête de votre script, ou l'inclure dans un fichier dans le <head> de votre document. Puis liez vos événements, référez - vous au bloc de code suivant ci-dessous qui montre un exemple de jQuery de capturer les événements et de tirer sur les fonctions qui leur sont assignées, bien que cela fonctionne avec normal javascript contraignant.

si vous êtes intéressé à le voir fonctionner, regardez le 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 la simplicité, mais le ci-dessus va travailler le navigateur croisé et le feu les mêmes noms d'événements, C'est-à-dire 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 abrégé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!

découvrez ce:

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