javascript - 控制状态

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>

这个想法是，无论它走到哪里，圆圈都会跟踪你的鼠标，直到你点击，然后它会回到它的静止点。问题是，当我再次移动鼠标时，它会撤消静止位置，并返回跟踪文档。onmousemove 计划是它只在您重新悬停“circle1”后恢复跟踪，一旦处于静止状态......并且然后使用 document.onmousemove 恢复跟踪

我知道我可以调用这样的东西而不是 document.onmousemove：

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

但是“鼠标是否悬停在这个特定元素上？” 事件是不精确的，当您快速移动鼠标时，您最终会丢失很多跟踪。

好像我需要构建某种状态机，它要么是trackingON，要么是trackingOFF。其中 trackingOFF 通过单击圆圈触发， trackingON 通过悬停圆圈触发（但实际跟踪使用 document.onmousemove

Answer 1

您需要一个标志来指定“我已单击，停止跟踪我的鼠标”以在您单击时设置，并勾选“我已将鼠标移到圆圈上，继续跟踪我”

这是更新的小提琴：http: //jsfiddle.net/ub9v9p0j/8/

和实际代码：

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