Comment connaître l'état actuel du bouton de la souris (état de la souris ou état de mousedown)

En réponse à la question

Je ne suis pas tout à fait sûr de savoir pourquoi votre système décide de faire glisser une image lorsque le clic s'est produit en dehors du navigateur (ou à l'extérieur de l'image) . Pour répondre correctement, je devrais voir votre code actuel ( Juste les événements de souris le feraient) . Cependant, si vous implémentez un système comme je le mentionne ci-dessous, vous ne devriez pas avoir le problème que vous posez.

Informations complémentaires

Le bon vieux Quirksmode a quelque chose à dire à propos de cela … Cela revient essentiellement au fait que, grâce au W3C, vous ne pouvez pas détecter si le bouton gauche est pressé dans un gestionnaire de mousemove car, lorsque aucun bouton n'est enfoncé, e.button sur les e.button 0 et quand Le bouton gauche est pressé – devinez quoi? – e.button rapporte 0! (Pour les navigateurs compatibles W3C qui est) . C'était l'une des fois où je suis entièrement d'accord avec l'implémentation d'Internet Explorer "binary flag":

http://www.quirksmode.org/js/events_properties.html#button

La seule façon d'obtenir l'état de la souris – que je connais – est de détecter et d'enregistrer en utilisant mousedown et mouseup – ce qui ressemble à ce que vous faites déjà. Maintenant, je n'ai pas eu la chance de jouer avec les nouveaux événements basés sur «Touch», et ils pourraient vous aider … mais il sera difficile de faire fonctionner crossbrowser. À la fin de la journée, il faut parfois accepter que vous travaillez dans un environnement de navigateur et qu'il ne soit jamais aussi lisse qu'une application spécifiquement conçue.

Code rapide qui fonctionnera pour Internet Explorer:

 document.body.onmousemove = function(e){ e = e ? e : Event; if ( e.button == 1 ) { /// mouse button is pressed } } 

Code rapide qui fonctionnera pour IE et à peu près tout autre chose:

 var delm = document.documentElement ? document.documentElement : document.body; var buttonPressed = false; delm.onmousdown = function(e){ buttonPressed = true; } delm.onmousup = function(e){ buttonPressed = false; } delm.onmousmove = function(e){ if ( buttonPressed ) { /// the button is pressed, but only whilst being /// detected inside the browser } } 

Comme d'autres affiches l'ont noté, vous pourriez essayer une implémentation d'un système qui pourrait détecter lorsque le pointeur de l'utilisateur a laissé / réintégré l'environnement du navigateur – mais toutes mes tentatives au fil des ans n'ont jamais été très couronnées de succès. Flash a un meilleur support pour cela, mais je doute que vous voudriez y aller …

Note latérale

Tout comme un peu d'informations historiques, qui peuvent encore être utiles aujourd'hui, lorsque vous traitez des images antérieures, les anciennes versions d'Internet Explorer nécessitent l'application suivante à l'image avant que la traînée réussisse. Cela a empêché le système de traînée du navigateur par défaut de se réduire et de se faire démarrer. Il existe de meilleures façons de mettre en œuvre ceci que d'utiliser un gestionnaire en ligne, mais je l'ai mis ici pour la simplicité et la clarté.

 <img src="..." ondragstart="return false;" /> 

Dans la situation que vous décrivez, le problème est que vous manipulez mouseup les mouseup et mousedown . Vous devriez également envisager de gérer des événements blur pour savoir que la souris a quitté l'objet. Vous voudrez peut-être l'attribuer au même gestionnaire pour la mouseup .

Pourquoi ne pas simplement passer avec jquery qui peut gérer de tels événements?

Si vous voulez vraiment lier mouseup et mousedown, vous pouvez utiliser jquery

 $(object).on("mouseup",function(){});