JavaScript : Vérifier si le bouton de la souris est enfoncé ?

Question

Existe-t-il un moyen de détecter si un bouton de la souris est actuellement enfoncé en JavaScript ?

Je connais l'événement "mousedown", mais ce n'est pas ce dont j'ai besoin. Quelque temps après que le bouton de la souris ait été enfoncé, je veux pouvoir détecter s'il l'est toujours.

Est-ce possible ?

Answer 1

En ce qui concerne la solution de Pax : elle ne fonctionne pas si l'utilisateur clique sur plus d'un bouton, intentionnellement ou accidentellement. Ne me demandez pas comment je le sais :-(.

Le code correct devrait être comme ça :

var mouseDown = 0;
document.body.onmousedown = function() { 
  ++mouseDown;
}
document.body.onmouseup = function() {
  --mouseDown;
}

Avec le test comme ça :

if(mouseDown){
  // crikey! isn't she a beauty?
}

Si vous voulez savoir quel bouton est pressé, soyez prêt à faire de mouseDown un tableau de compteurs et à les compter séparément pour les différents boutons :

// let's pretend that a mouse doesn't have more than 9 buttons
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],
    mouseDownCount = 0;
document.body.onmousedown = function(evt) { 
  ++mouseDown[evt.button];
  ++mouseDownCount;
}
document.body.onmouseup = function(evt) {
  --mouseDown[evt.button];
  --mouseDownCount;
}

Vous pouvez maintenant vérifier quels boutons ont été pressés exactement :

if(mouseDownCount){
  // alright, let's lift the little bugger up!
  for(var i = 0; i < mouseDown.length; ++i){
    if(mouseDown[i]){
      // we found it right there!
    }
  }
}

Sachez que le code ci-dessus ne fonctionne que pour les navigateurs conformes aux normes qui vous transmettent un numéro de bouton à partir de 0. IE utilise un masque binaire des boutons actuellement pressés :

• 0 pour " rien n'est appuyé "
• 1 pour la gauche
• 2 pour la droite
• 4 pour le milieu
• et toute combinaison des éléments ci-dessus, par exemple 5 pour gauche + milieu

Ajustez donc votre code en conséquence ! Je le laisse comme un exercice.

Et rappelez-vous : IE utilise un objet événement global appelé "événement".

Par ailleurs, IE possède une fonctionnalité utile dans votre cas : alors que les autres navigateurs envoient "button" uniquement pour les événements liés aux boutons de la souris (onclick, onmousedown et onmouseup), IE l'envoie également avec onmousemove. Vous pouvez donc commencer à écouter onmousemove lorsque vous avez besoin de connaître l'état du bouton, et vérifier evt.button dès que vous l'avez obtenu - vous savez maintenant quels boutons de la souris ont été pressés :

// for IE only!
document.body.onmousemove = function(){
  if(event.button){
    // aha! we caught a feisty little sheila!
  }
};

Bien sûr, vous n'obtenez rien si elle fait le mort et ne bouge pas.

Liens pertinents :

• Le bouton de MouseEvent (DOM 2)
• Le bouton de MSDN

Mise à jour n° 1 : Je ne sais pas pourquoi j'ai reporté le code document.body-style. Il serait préférable d'attacher les gestionnaires d'événements directement au document.

Answer 2

C'est une vieille question, et les réponses semblent surtout préconiser l'utilisation de mousedown et mouseup pour savoir si un bouton est enfoncé. Mais comme d'autres l'ont souligné, mouseup ne se déclenchera que lorsqu'elle sera exécutée dans le navigateur, ce qui peut entraîner une perte de l'état du bouton.

Cependant, MouseEvent (maintenant) indique les boutons qui sont actuellement enfoncés :

• Pour tous les navigateurs modernes (sauf Safari), utilisez MouseEvent.buttons
• Pour Safari, utilisez MouseEvent.which ( buttons sera indéfini pour Safari) Note : which utilise des numéros différents de buttons pour les clics droit et moyen.

Lorsqu'il est enregistré sur document , mousemove se déclenchera immédiatement dès que le curseur reviendra dans le navigateur. Ainsi, si l'utilisateur relâche la souris à l'extérieur, l'état sera mis à jour dès qu'il reviendra dans le navigateur.

Une mise en œuvre simple pourrait ressembler à ceci :

var leftMouseButtonOnlyDown = false;

function setLeftButtonState(e) {
  leftMouseButtonOnlyDown = e.buttons === undefined 
    ? e.which === 1 
    : e.buttons === 1;
}

document.body.onmousedown = setLeftButtonState;
document.body.onmousemove = setLeftButtonState;
document.body.onmouseup = setLeftButtonState;

Si des scénarios plus complexes sont nécessaires (différents boutons/multiples boutons/clés de commande), consultez la documentation MouseEvent. Si Safari améliore son jeu, cela devrait devenir plus facile.

Answer 3

Je pense que la meilleure approche consiste à conserver votre propre enregistrement de l'état du bouton de la souris, comme suit :

var mouseDown = 0;
document.body.onmousedown = function() { 
    mouseDown = 1;
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

et ensuite, plus tard dans votre code :

if (mouseDown == 1) {
    // the mouse is down, do what you have to do.
}

Answer 4

La solution n'est pas bonne. On pourrait faire un "mousedown" sur le document, puis un "mouseup" en dehors du navigateur, et dans ce cas le navigateur penserait toujours que la souris est en bas.

la seule bonne solution est d'utiliser l'objet IE.event.

Answer 5

Je sais que c'est un vieux post, mais je trouvais que le suivi du bouton de la souris en utilisant le haut/bas de la souris était un peu maladroit, alors j'ai trouvé une alternative qui pourrait plaire à certains.

<style>
    div.myDiv:active {
        cursor: default;
    }
</style>

<script>
    function handleMove( div ) {
        var style = getComputedStyle( div );
        if (style.getPropertyValue('cursor') == 'default')
        {
            // You're down and moving here!
        }
    }
</script>

<div class='myDiv' onmousemove='handleMove(this);'>Click and drag me!</div>

Le sélecteur :active gère le clic de la souris bien mieux que les mouvements de souris vers le haut ou vers le bas, il faut simplement trouver un moyen de lire cet état dans l'événement onmousemove. Pour cela, j'ai dû tricher et m'appuyer sur le fait que le curseur par défaut est "auto" et que je le change simplement en "default", ce qui est ce que l'auto sélectionne par défaut.

Vous pouvez utiliser n'importe quel élément de l'objet renvoyé par getComputedStyle que vous pouvez utiliser comme indicateur sans bouleverser l'aspect de votre page, par exemple border-color.

J'aurais aimé définir mon propre style défini par l'utilisateur dans la section :active, mais je n'ai pas réussi à le faire fonctionner. Ce serait mieux si c'était possible.