Les événements et la position du curseur

J'en veux pour preuve les coordonnées de la souris alors que le curseur au-dessus de la div rouge et le bouton de la souris est en baisse.

Le problème est que lorsque je presse le bouton à l'extérieur de la div et de revenir le curseur à la div, événement onmousemove n'est pas supprimé.

REMARQUE: je ne veux pas utiliser n'importe quelle 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, c'est très facile: (testé sous Firefox uniquement)
texte du lien

$(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);

Veuillez noter scénarios principaux:

  1. Si le bouton a été cliqué en dehors de la place, et, tout en maintenant, a déménagé à suqre - Ne pas upddate position.
  2. Si le bouton a été cliqué à l'intérieur de la place , et, tout en maintenant, se déplacer à l'extérieur - stop de mise à jour, de le ramener (sans relâcher le bouton) de continuer à mettre à jour

En d'autres termes, la première mousedown devrait être en place seulement pour commencer la mise à jour.

Je veux faire la même chose avec javascript.

OriginalL'auteur jullin | 2010-11-06

  1. 3

    Votre code peut être mieux écrite (Travail De Démonstration)

    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);
}​
    ce n'est pas bon, parce que si j'ai de la souris, déplacez-le de côté et puis (sans relâcher) le replacer à l'intérieur-je attendre pour obtenir la position.
    Ensuite, vous devriez vérifier onmouseover si le bouton gauche est (encore) en bas à rattacher à l'événement.
    Korpel , comment puis-je vérifier que et où?
    Mais ce n'est pas ce dont j'ai besoin, est-il?
    galambalazs, je ne suis pas. essayez les opérations suivantes: cliquez et maintenez la souris tandis que sur la place rouge, tout en maintenant déplacer à l'extérieur de la place (ne relâchez pas le bouton), le positionnement n'est pas mis à jour (comme il faut), maintenant de retour curseur à la place (encore holding), le positionnement n'est pas être mis à jour

    OriginalL'auteur gblazex