javascript - 默认情况下，在启动时以条件AND执行一行

我有这个小提琴：http://jsfiddle.net/zhaem/Lyzrtefo/7/

var orangeMode = true
var isTracking = true

getMouseXY = function(e) {
  if (isTracking) {
  var tempX = e.pageX
  var 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;

var toggleTrackCircle = function() {
  isTracking = !isTracking;
  console.log(isTracking);
}

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

flip = function() {
  orangeMode = !orangeMode;
  if (orangeMode) {
  document.getElementById("circle1").style.backgroundColor = "orange";
  document.getElementById("circle1").addEventListener('mouseover', function() {isTracking = true;})
  // When the above line is executed the circle will stick to your cursor on HOVER after clicking and setting it down.
  } else {
    document.getElementById("circle1").style.backgroundColor = "blue";
  }
}
document.getElementById("box3").addEventListener("click", flip);

有一条线，当出现时将改变交互的行为。 （您始终可以单击以停止光标跟踪您，但是当该行存在时，圆圈将在悬停时重新停留在它上面，而当圆圈不在时，仅在悬停并单击时才重新出现它。

document.getElementById("circle1").addEventListener('mouseover', function() {isTracking = true;})

我试图将其包装在翻转功能的某些条件逻辑中（您可以通过点击角落的红色框进行控制），以便orangeMode ==停留在悬停上，而不是orangeMode停留在单击时重新停留。

翻转功能可很好地用于更改颜色，但是此事件侦听器的性能不如我想要的那样。 （一旦您遍历它，它确实起作用了，但是对于任何一种状态，它都没有运行orangeMode卸载。

任何帮助将非常感激。

最佳答案

您需要输入“ isTracking = true;”在命名函数中，因此您可以使用“ removeEventListener”将函数取消。那意味着您添加此功能：

var trackCircle = function() {
  isTracking = true;
}

然后，在单击时引用它，而不是匿名函数：

circle.addEventListener('mouseover', trackCircle)

然后，您只需在else中删除该事件：

circle.removeEventListener('mouseover', trackCircle)

哦，我将其添加到顶部，因此您无需继续重复getElementById短语：

circle = document.getElementById("circle1");

希望能有所帮助。哦，这是您的小提琴的编辑内容：

http://jsfiddle.net/Lyzrtefo/9/