Événements et position du curseur

Je souhaite afficher les coordonnées de la souris lorsque le curseur sur le div rouge et le bouton de la souris est enfoncé.Événements et position du curseur

Le problème est que lorsque je relâche le bouton en dehors de la div et que je ramène le curseur à la div, l'événement onmousemove n'est pas supprimé.

REMARQUE: Je ne souhaite utiliser aucune bibliothèque comme jQuery.

 <script type="text/javascript"> 

       window.onload = function(){ 

     document.getElementById("thediv").onmousedown = AttachEvent; 

    } 
      function GetPos(e){         
       document.getElementById('X').value = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); 
       document.getElementById('Y').value = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); 

      } 

      function UnaatachEvent(e){ 
       document.getElementById("thediv").onmousemove = null; 
       document.getElementById("thediv").onmouseup = null; 
      } 

      function AttachEvent(e){ 
       document.getElementById("thediv").onmousemove = GetPos; 
       document.getElementById("thediv").onmouseup = UnaatachEvent; 
      } 
     </script> 
    </head> 
    <body> 
     <input type="text" id="X" size="3">X-position 
     <br/> 
     <br/> 
     <input type="text" id="Y" size="3">Y-position 
     <div style="width:100px;height:100px;background-color:red;margin:auto;" id="thediv"> 
     </div> 
    </body>

MISE À JOUR:
Avec jQuery, il est très facile: (testé dans Firefox uniquement) link text

$(document).ready(function(){ 

    $('#thediv').mousedown(attachEvent); 
    }); 
function attachEvent(e){ 
     $('#thediv').mousemove(getPos).mouseup(unattachEvent); 

     return false; 
} 

function getPos(e){ 

    document.getElementById('X').value = e.pageX; 
    document.getElementById('Y').value = e.pageY;    
return false; 
} 

function unattachEvent(e){ 
    $('#thediv').unbind("mousemove", getPos).unbind("mouseup", unattachEvent);

S'il vous plaît noter principaux scénarios:

Si le bouton a été cliqué à l'extérieur du carré, et en le maintenant enfoncé, déplacé vers suqre - Ne pas mettre à jour la position.
Si le bouton a été cliqué dans le carré, et tout en maintenant, se déplacer à l'extérieur - arrêter la mise à jour, la ramener (sans relâcher le bouton) continuer la mise à jour

En d'autres termes, la mousedown initiale devrait être sur place seulement pour démarrer la mise à jour.

Je veux faire la même chose avec javascript.

Source

2010-11-06 jullin

Votre code peut être mieux écrit (Working Demo)

var div = document.getElementById("thediv"); 
div.onmousedown = attachEvent; 

// if mouse released, stop watching mouseover 
document.onmouseup = function() { 
    div.onmouseover = null; 
} 

function attachEvent() { 
    this.onmousemove = getPos; 
    this.onmouseout = unattachEvent; 
    this.onmouseup = unattachEvent; 
    return false; // prevent Firefox "drag behavior" 
} 

function unattachEvent() { 
    this.onmousemove = null; 
    this.onmouseup = null; 
    this.onmouseout = null; 
    // wait for the mouse to come back 
    this.onmouseover = attachEvent; 
} 

function getPos(e) { 
    e = e || window.event; 
    var docEl = document.documentElement; 
    var scrollLeft = docEl.scrollLeft || document.body.scrollLeft; 
    var scrollTop = docEl.scrollTop || document.body.scrollTop; 
    document.getElementById('X').value = e.pageX || (e.clientX + scrollLeft); 
    document.getElementById('Y').value = e.pageY || (e.clientY + scrollTop); 
}

Source

2010-11-06 11:21:43 galambalazs

ce n'est pas bon, parce que si je tiens la souris, déplacez-le côté, puis (sans relâcher) le déplacer à l'intérieur je compte obtenir la position. – jullin

@jullin: Ensuite, vous devriez vérifier 'onmouseover' si le bouton gauche est (encore) enfoncé pour rattacher l'événement. –

@Marcel Korpel, comment puis-je vérifier cela et où? – jullin

Événements et position du curseur

Répondre

Questions connexes