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


Comment obtenez-vous le bouton de la souris cliqué en utilisant jQuery?

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

cela est déclenché à la fois par le clic droit et le clic gauche, quel est le moyen d'être en mesure 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');
});

534
2017-07-30 12:11


origine


Réponses:


À partir de la version 1.1.3 de jQuery, event.which normalise event.keyCode et event.charCode vous n'avez donc pas à vous soucier des problèmes de compatibilité du navigateur. Documentation sur event.which

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

833
2018-04-27 23:52



modifier: Je l'ai changé pour travailler pour les éléments ajoutés dynamiquement en utilisant .on() en jQuery 1.7 ou plus:

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

Démonstration 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 ^^

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


241
2018-02-10 22:16



Vous pouvez facilement dire quel bouton de la souris a été pressé en vérifiant which propriété de l'objet événement sur les événements 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! */
    }
});

79
2017-10-29 22:20



Vous pouvez aussi bind à contextmenu et return false:

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

Démonstration 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émonstration 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émonstration http://jsfiddle.net/maniator/WS9S2/283/ 


37
2017-12-13 15:26



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


30
2017-07-30 12:18



$.event.special.rightclick = {
    bindType: "contextmenu",
    delegateType: "contextmenu"
};

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

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


18
2017-08-14 13:09



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 Microsoft pour event.button les codes diffèrent de ceux utilisés par W3C. W3C considère seulement 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, cependant, Microsoft est en train de basculer un peu pour 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. Tous les 3 boutons sont cliqués - event.button === 7 ou 111

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


14
2017-10-26 14:31



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 e.which attribut, renvoyant 1, 2, 3 pour gauche, moyen et clic droit respectivement. Donc vous pouvez aussi 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"


8
2017-12-18 18:49



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

Mais vous devriez aussi penser aux touches de modification: ctrlcmddécalagealt

Si vous souhaitez seulement attraper 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...
  }
});

3
2018-05-08 10:25