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

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

似乎我需要构建某种状态机，其中跟踪开启或跟踪关闭。其中，trackingOFF 通过点击圆圈触发，trackingON 通过悬停圆圈触发(但实际跟踪使用 document.onmousemove

Answer 1

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

这是更新后的 fiddle :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);