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

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

Je connais l'événement "mousedown", mais ce n'est pas ce dont j'ai besoin. Quelques temps APRÈS avoir appuyé sur le bouton de la souris, je veux être en mesure de détecter s'il est toujours enfoncé.

Est-ce possible?

En ce qui concerne la solution de Pax: cela ne fonctionne pas si l'utilisateur clique sur plus d'un bouton intentionnellement ou accidentellement. Ne me demandez pas comment je 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 celui-ci:

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

Si vous voulez savoir sur quel bouton vous appuyez, préparez-vous à faire de mouseDown un tableau de compteurs et à les compter séparément pour des boutons séparés:

// 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é appuyé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 maintenant que le code ci-dessus ne fonctionnera que pour les navigateurs conformes à la norme qui vous transmettent un numéro de bouton à partir de 0. IE utilise un masque de bits des boutons actuellement enfoncés:

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

Alors ajustez votre code en conséquence! Je laisse ça comme un exercice.

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

Incidemment, IE a une fonctionnalité utile dans votre cas: lorsque d'autres navigateurs envoient un "bouton" uniquement pour les événements de bouton de la souris (onclick, onmousedown et onmouseup), IE l'envoie également avec onmousemove. Ainsi, vous pouvez 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 - vous savez maintenant sur quels boutons de la souris ont été enfoncé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 joue la morte et ne bouge pas.

Liens pertinents:

• Bouton de MouseEvent (DOM 2)
• Bouton MSDN

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

C'est une vieille question, et les réponses ici semblent principalement préconiser l'utilisation mousedownet le mouseupsuivi de la pression sur un bouton. Mais comme d'autres l'ont souligné, mouseupne se déclenche que lorsqu'il est exécuté dans le navigateur, ce qui peut entraîner la perte de trace de l'état du bouton.

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

• Pour tous les navigateurs modernes (sauf Safari), utilisez MouseEvent.buttons
• Pour Safari, utilisez MouseEvent.which( buttonsne sera pas défini pour Safari) Remarque: whichutilise des nombres différents de ceux buttonsdes clics droit et central.

Lorsqu'il est enregistré sur document, mousemovese déclenche immédiatement dès que le curseur rentre dans le navigateur, donc si l'utilisateur libère à l'extérieur, l'état sera mis à jour dès qu'il reviendra à l'intérieur de la souris.

Une implémentation simple pourrait ressembler à:

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 compliqués sont nécessaires (différents boutons / plusieurs boutons / touches de contrôle), consultez la documentation MouseEvent. Quand / si Safari lève son jeu, cela devrait devenir plus facile.

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

puis, plus loin dans votre code:

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

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

la seule bonne solution consiste à utiliser l'objet IE.event.

Je sais que c'est un ancien article, mais je pensais que le suivi du bouton de la souris à l'aide de la souris haut / bas me semblait 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 bien mieux le clic de la souris que la souris haut / bas, vous avez juste besoin d'un moyen de lire cet état dans l'événement onmousemove. Pour cela, j'avais besoin de tricher et je me suis appuyé sur le fait que le curseur par défaut est "auto" et je l'ai juste changé en "default", qui est ce que sélectionne automatiquement par défaut.

Vous pouvez utiliser n'importe quoi dans l'objet renvoyé par getComputedStyle que vous pouvez utiliser comme indicateur sans perturber l'apparence de votre page, par exemple la couleur de la bordure.

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

L'extrait de code suivant tentera d'exécuter la fonction «doStuff» 2 secondes après que l'événement mouseDown se produit dans document.body. Si l'utilisateur soulève le bouton, l'événement mouseUp se produira et annulera l'exécution différée.

Je vous conseillerais d'utiliser une méthode pour l'attachement d'événements entre navigateurs - la définition explicite des propriétés mousedown et mouseup a été effectuée pour simplifier l'exemple.

function doStuff() {
  // does something when mouse is down in body for longer than 2 seconds
}

var mousedownTimeout;

document.body.onmousedown = function() { 
  mousedownTimeout = window.setTimeout(doStuff, 2000);
}

document.body.onmouseup = function() {
  window.clearTimeout(mousedownTimeout);
}

Court et doux

Je ne sais pas pourquoi aucune des réponses précédentes n'a fonctionné pour moi, mais j'ai trouvé cette solution pendant un moment eureka. Cela fonctionne non seulement, mais c'est aussi le plus élégant:

Ajouter à la balise body:

onmouseup="down=0;" onmousedown="down=1;"

Ensuite, testez et exécutez myfunction()si downégal 1:

onmousemove="if (down==1) myfunction();"

Vous pouvez combiner @Pax et mes réponses pour obtenir également la durée pendant laquelle la souris est restée en panne:

var mousedownTimeout,
    mousedown = 0;

document.body.onmousedown = function() {
  mousedown = 0; 
  window.clearInterval(mousedownTimeout);
  mousedownTimeout = window.setInterval(function() { mousedown += 200 }, 200);
}

document.body.onmouseup = function() {
  mousedown = 0;
  window.clearInterval(mousedownTimeout);
}

Puis plus tard:

if (mousedown >= 2000) {
  // do something if the mousebutton has been down for at least 2 seconds
}

Vous devez gérer MouseDown et MouseUp et définir un indicateur ou quelque chose pour le suivre "plus tard sur la route" ... :(

Si vous travaillez dans une page complexe avec des gestionnaires d'événements de souris existants, je vous recommande de gérer l'événement lors de la capture (au lieu de la bulle). Pour ce faire, réglez simplement le 3ème paramètre addEventListenersur true.

De plus, vous voudrez peut-être vérifier pour event.whichvous assurer que vous gérez l'interaction réelle de l'utilisateur et non les événements de souris, par exemple elem.dispatchEvent(new Event('mousedown')).

var isMouseDown = false;

document.addEventListener('mousedown', function(event) { 
    if ( event.which ) isMouseDown = true;
}, true);

document.addEventListener('mouseup', function(event) { 
    if ( event.which ) isMouseDown = false;
}, true);

Ajoutez le gestionnaire au document (ou à la fenêtre) au lieu de document.body est important car il garantit que les événements de souris en dehors de la fenêtre sont toujours enregistrés.

À l'aide de l' API MouseEvent , pour vérifier le bouton enfoncé, le cas échéant:

document.addEventListener('mousedown', (e) => console.log(e.buttons))

Retour :

Un nombre représentant un ou plusieurs boutons. Pour plus d'un bouton enfoncé simultanément, les valeurs sont combinées (par exemple, 3 est primaire + secondaire).

0 : No button or un-initialized
1 : Primary button (usually the left button)
2 : Secondary button (usually the right button)
4 : Auxilary button (usually the mouse wheel button or middle button)
8 : 4th button (typically the "Browser Back" button)
16 : 5th button (typically the "Browser Forward" button)

En utilisant jQuery, la solution suivante gère même le «glisser hors de la page puis relâcher le cas».

$(document).mousedown(function(e) {
    mouseDown = true;
}).mouseup(function(e) {
    mouseDown = false;
}).mouseleave(function(e) {
    mouseDown = false;
});

Je ne sais pas comment il gère plusieurs boutons de souris. S'il y avait un moyen de démarrer le clic en dehors de la fenêtre, puis d'amener la souris dans la fenêtre, cela ne fonctionnerait probablement pas correctement non plus.

Ci-dessous l'exemple jQuery, lorsque la souris est sur $ ('. Element'), la couleur change en fonction du bouton de la souris enfoncé.

var clicableArea = {
    init: function () {
        var self = this;
        ('.element').mouseover(function (e) {
            self.handlemouseClick(e, $(this));
        }).mousedown(function (e) {
            self.handlemouseClick(e, $(this));
        });
    },
    handlemouseClick: function (e, element) {
        if (e.buttons === 1) {//left button
            element.css('background', '#f00');
        }
        if (e.buttons === 2) { //right buttom
            element.css('background', 'none');
        }
    }
};
$(document).ready(function () {
    clicableArea.init();
});

Comme dit @Jack, lorsque mouseupcela se produit en dehors de la fenêtre du navigateur, nous n'en sommes pas conscients ...

Ce code a (presque) fonctionné pour moi:

window.addEventListener('mouseup', mouseUpHandler, false);
window.addEventListener('mousedown', mouseDownHandler, false);

Malheureusement, je n'obtiendrai pas l' mouseupévénement dans l'un de ces cas:

• l'utilisateur appuie simultanément sur une touche du clavier et un bouton de la souris, relâche le bouton de la souris en dehors de la fenêtre du navigateur puis relâche la touche.
• l'utilisateur appuie simultanément sur deux boutons de la souris, relâche un bouton de la souris puis l'autre, tous deux en dehors de la fenêtre du navigateur.

Eh bien, vous ne pouvez pas vérifier s'il est en panne après l'événement, mais vous pouvez vérifier s'il est en hausse ... S'il est en hausse ... cela signifie qu'il n'est plus en panne: P lol

Ainsi, l'utilisateur appuie sur le bouton vers le bas (événement onMouseDown) ... et après cela, vous vérifiez s'il est activé (onMouseUp). Même si ce n'est pas le cas, vous pouvez faire ce dont vous avez besoin.

        var mousedown = 0;
        $(function(){
            document.onmousedown = function(e){
                mousedown = mousedown | getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.onmouseup = function(e){
                mousedown = mousedown ^ getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.oncontextmenu = function(e){
                // to suppress oncontextmenu because it blocks
                // a mouseup when two buttons are pressed and 
                // the right-mouse button is released before
                // the other button.
                return false;
            }
        });

        function getWindowStyleButton(e){
            var button = 0;
                if (e) {
                    if (e.button === 0) button = 1;
                    else if (e.button === 1) button = 4;
                    else if (e.button === 2) button = 2;  
                }else if (window.event){
                    button = window.event.button;
                }
            return button;
        }

cette version multi-navigateurs fonctionne très bien pour moi.