javascript - 控制状态

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>

这个想法是，圆圈会追踪鼠标到处的位置，直到您单击为止，然后它会回到其静止位置。问题是，当我再次移动鼠标时，它将撤消静止位置，并返回到对document.onmousemove的计划是，在您重新悬停“ circle1”后，它仅在静止后才恢复跟踪。然后使用document.onmousemove恢复跟踪

我知道我可以这样称呼而不是document.onmousemove：

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

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

似乎我需要构建某种状态机，其中要么trackingON要么trackingOFF。单击圆会触发trackingOFF，而将鼠标悬停在圆上会触发trackingON（但是实际的跟踪使用document.onmousemove

最佳答案

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

这是更新的小提琴：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);

关于javascript - 控制状态，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34146507/