web-dev-qa-db-fra.com

Comment distinguer les clics gauche et droit de la souris avec jQuery

Comment obtenir le bouton de la souris cliqué avec jQuery?

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

ceci est déclenché par les clics droit et gauche, quelle est la manière de pouvoir attraper un 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');
});
javascriptjqueryjavascript-eventsright-click
562
Sinan

Depuis la version 1.1.3 de jQuery, event.which normalise event.keyCode et event.charCode afin que vous n'ayez pas à vous soucier des problèmes de compatibilité de navigateur. Documentation sur event.which

event.which donnera 1, 2 ou 3 pour les boutons gauche, central 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!');
    }
});
880
Acorn

Edit : Je l'ai modifié pour que les éléments ajoutés dynamiquement utilisent .on() dans jQuery 1.7 ou une version ultérieure:

$(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] Voici ce qui a fonctionné pour moi:

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

Si vous êtes dans plusieurs solutions ^^

Edit : Tim Down fait remarquer que ce ne sera pas toujours un right-click qui déclenchera l'événement contextmenu, mais aussi lorsque la touche du menu contextuel est enfoncée (ce qui est sans doute un remplacement pour un right-click)

247
Jeff Hines

Vous pouvez facilement savoir quel bouton de la souris a été enfoncé en vérifiant la propriété which 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! */
    }
});
83
Russ Cam

Vous pouvez également 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 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 );

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

Utilisation de .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/

38
Neal
$("#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 pour 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>
30
TheVillageIdiot
$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

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

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

18
Esailija

Il y a beaucoup de très bonnes réponses, mais je veux juste aborder une différence majeure entre IE9 et IE <9 lorsque vous utilisez event.button.

Selon l'ancienne spécification Microsoft pour event.button, les 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 du milieu de la souris est cliqué - event.button === 2

Dans les anciens Internet Explorers, cependant, Microsoft change un peu le bouton enfoncé 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 du milieu 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. Les 3 boutons sont cliqués - event.button === 7 ou 111

Même si, théoriquement, cela devrait fonctionner, Internet Explorer n’a jamais supporté les cas où deux ou trois boutons étaient enfoncés simultanément. Je le mentionne parce que le standard W3C ne peut même pas le supporter théoriquement.

14
Konstantin Dinev

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 les clics gauche, moyen et droit, respectivement. Donc, vous pouvez aussi utiliser if (e.which == 3) { alert("right click"); }

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

8
Dan Burton

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

Mais vous devriez aussi penser aux touches de modification: ctrlcmdshiftalt

Si vous souhaitez uniquement capturer des clics gauche simples et non modifiés, vous pouvez procéder de la manière suivante:

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...
  }
});
3
callum
$("body").on({
    click: function(){alert("left click");},
    contextmenu: function(){alert("right click");}   
});
1
A. K.

Si vous recherchez "de meilleurs événements de souris Javascript" qui permettent

  • mousedown gauche
  • milieu souris
  • droit souris
  • mouseup gauche
  • milieu mouseup
  • bonne mouseup
  • click gauche
  • clic du milieu
  • clic-droit
  • mousewheel up
  • molette vers le bas

Jetez un coup d'œil à ce javascript normal qui traverse les navigateurs et supprime le travail maux de tête. Copiez-le et collez-le simplement dans la tête de votre script ou incluez-le dans un fichier dans le <head> de votre document. Ensuite, liez vos événements, reportez-vous au bloc de code suivant ci-dessous qui présente un exemple jQuery de capture des événements et d'activation des fonctions qui leur sont affectées, bien que cela fonctionne également avec une liaison JavaScript normale.

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énement de clic de souris (utilise jQuery pour plus de simplicité, mais ce qui précède fonctionne avec plusieurs navigateurs et déclenche les mêmes noms d'événement, IE utilisé 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)}();
1
NinjaKC
$(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;

    }


});
0
user2335866

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

Avec jquery, vous pouvez utiliser event object type

_jQuery(".element").on("click contextmenu", function(e){
   if(e.type == "contextmenu") {
       alert("Right click");
   }
});
_
0
KeepMove