72 votes

jQuery: la Détection de la souris enfoncé le bouton pendant l'événement mousemove

J'ai essayé de détecter le bouton de la souris -si tout est l'utilisateur en appuyant sur pendant un événement mousemove sous jQuery, mais j'obtiens des résultats ambigus:

no button pressed:      e.which = 1   e.button = 0
left button pressed:    e.which = 1   e.button = 0
middle button pressed:  e.which = 2   e.button = 1
right button pressed:   e.which = 3   e.button = 2

Code:

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>

<input id="whichkey" value="type something">
<div id="log"></div>
<script>$('#whichkey').bind('mousemove',function(e){ 
  $('#log').html(e.which + ' : ' +  e.button );
});  </script>

</body>
</html>

Comment puis-je faire la différence entre le bouton gauche de la souris enfoncé et bouton non?

63voto

DarthJDG Points 11698

Vous pouvez écrire un peu de code pour garder une trace de l'état du bouton gauche de la souris, et avec un peu de fonction, vous pouvez pré-traiter le cas de la variable dans l' mousemove événement.

Pour garder une trace de l'état de la LMB, lier un événement à niveau du document pour mousedown et mouseup et vérifiez e.which de mettre ou d'enlever le drapeau.

Le pré-traitement est effectué par l' tweakMouseMoveEvent() fonction dans mon code. Pour soutenir les versions IE < 9, vous devez vérifier si les boutons de la souris ont été libérés à l'extérieur de la fenêtre et effacer le drapeau si. Ensuite, vous pouvez changer le passé de l'événement variable. Si e.which a été à l'origine de 1 (pas de bouton ou de la norme LMB) et l'état actuel de la gauche, le bouton n'est pas pressé, il suffit de mettre e.which de 0, et de les utiliser que dans le reste de votre mousemove événement pour vérifier l'absence de boutons enfoncé.

L' mousemove gestionnaire dans mon exemple qui vient d'appels réglage de la fonction de passage de l'événement en cours de la variable, puis affiche la valeur de e.which.

$(function() {
    var leftButtonDown = false;
    $(document).mousedown(function(e){
        // Left mouse button was pressed, set flag
        if(e.which === 1) leftButtonDown = true;
    });
    $(document).mouseup(function(e){
        // Left mouse button was released, clear flag
        if(e.which === 1) leftButtonDown = false;
    });

    function tweakMouseMoveEvent(e){
        // Check from jQuery UI for IE versions < 9
        if ($.browser.msie && !e.button && !(document.documentMode >= 9)) {
            leftButtonDown = false;
        }

        // If left button is not set, set which to 0
        // This indicates no buttons pressed
        if(e.which === 1 && !leftButtonDown) e.which = 0;
    }

    $(document).mousemove(function(e) {
        // Call the tweak function to check for LMB and set correct e.which
        tweakMouseMoveEvent(e);

        $('body').text('which: ' + e.which);
    });
});

Essayer une démo en live ici: http://jsfiddle.net/G5Xr2/

6voto

marcosfromero Points 2575

Pour une raison quelconque, lors de la liaison à l' mousemove événement, l' event.which propriété est définie à l' 1 si le bouton gauche ou aucune ne l'est pressé.

J'ai changé d' mousedown événement et il a travaillé sur Ok:

  • à gauche: 1
  • moyen: 2
  • droite: 3

Voici un exemple: http://jsfiddle.net/marcosfromero/RrXbX/

Le jQuery, le code est:

$('p').mousedown(function(event) {
    console.log(event.which);
    $('#button').text(event.which);
});

6voto

Mottie Points 31167

jQuery normalise l' which de la valeur afin qu'il fonctionne sur tous les navigateurs. Je parie que si vous exécutez votre script, vous trouverez différents e.bouton de valeurs.

2voto

Ces variables sont mises à jour lorsque l' mousedown cas (entre autres) des incendies; vous voyez la valeur de vestiges de l'événement. Notez qu' ils sont les propriétés de cet événement, pas de la souris elle-même:

Description: Pour une touche ou un bouton d'événements, cet attribut indique le bouton ou la touche qui a été pressée.

Il n'y a pas de valeur pour le "pas touche", parce que l' mousedown événement ne sera jamais le feu pour indiquer qu'il n'y a aucun bouton n'est pressé.

Vous devrez garder votre global [boolean] variable et activer/désactiver sur mousedown/mouseup.

  • Cela ne fonctionnera que si la fenêtre du navigateur avait le focus lorsque le bouton est enfoncé, ce qui signifie un focus-basculer entre l'utilisateur en appuyant sur le bouton de la souris et votre mousemove événement de tir empêchera que cela fonctionne correctement. Cependant, il n'y a vraiment pas beaucoup que vous pouvez faire à ce sujet.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X