état Contrôle

Question

getMouseXY = function(e) { 
 
    tempX = e.pageX 
 
    tempY = e.pageY 
 

 
    if (tempX < 0){tempX = 0} 
 
    if (tempY < 0){tempY = 0} 
 

 
    document.getElementById("circle1").style.top = (tempY - 25) + "px"; 
 
    document.getElementById("circle1").style.left = (tempX - 25) + "px"; 
 
    return true 
 
} 
 

 
document.onmousemove = getMouseXY; 
 

 
trackCircle = function() { 
 
    document.getElementById("circle1").style.top = "10px"; 
 
    document.getElementById("circle1").style.left = "10px"; 
 
} 
 

 
document.getElementById("circle1").addEventListener("click", trackCircle);

<div id="circle1" style="width:50px;height:50px;background-color:orange;border-radius:50px;position:absolute;"></div>

L'idée est le cercle suit votre souris partout où il va, jusqu'à ce que vous cliquez, il retourne à son lieu de repos. Le problème est, quand je déplace à nouveau la souris, il annule la position de repos, et retourne au suivi du document.onmousemove Le plan est pour qu'il reprenne seulement le suivi, une fois au repos, après que vous ayez survolé "circle1" ... puis reprend le suivi avec document.onmousemove

Je sais que je pourrais appeler quelque chose comme ça au lieu de document.onmousemove:

document.getElementById("circle1").addEventListener('mousemove', getMouseXY); 

Mais le « est le vol stationnaire de la souris sur cet élément spécifique? » L'événement est imprécis et vous finissez par perdre beaucoup de temps lorsque vous déplacez la souris rapidement.

On dirait que j'ai besoin de construire une sorte de machine d'état où c'est soit trackingON ou trackingOFF. Où trackingOFF est déclenché en cliquant sur le cercle et trackingON est déclenché en survolant le cercle (mais alors le suivi réel utilise document.onmousemove

Answer 1

Vous avez besoin d'un drapeau pour spécifier que "J'ai cliqué, arrêter le suivi de ma souris" à définir lorsque vous cliquez sur et un chèque de dire « Je l'ai déplacé ma souris sur le cercle, reprendre moi le suivi »

Voici le violon mis à jour: http://jsfiddle.net/ub9v9p0j/8/

et le code réel:

var stopTracking = false; 

getMouseXY = function(e) { 
    tempX = e.pageX 
    tempY = e.pageY 
    var circle = document.querySelector('#circle1'); 
    var r = circle.offsetWidth/2; 

    if (tempX < 0){tempX = 0} 
    if (tempY < 0){tempY = 0} 

    if (stopTracking) { 
    if (Math.pow(tempX - circle.offsetLeft - r, 2) + Math.pow(tempY - circle.offsetTop - r, 2) < r * r) { 
     stopTracking = false; 
    } else { 
     return; 
    } 
    } 
    document.getElementById("circle1").style.top = (tempY - 25) + "px"; 
    document.getElementById("circle1").style.left = (tempX - 25) + "px"; 
    return true 
} 

document.onmousemove = getMouseXY; 

trackCircle = function() { 
    document.getElementById("circle1").style.top = "10px"; 
    document.getElementById("circle1").style.left = "10px"; 
    stopTracking = true; 
} 

document.getElementById("circle1").addEventListener("click", trackCircle);