javascript - 默认情况下在开始时执行条件 AND 中的一行

Question

我有这个 fiddle :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;})

我试图将其包装在翻转功能中的一些条件逻辑中(您可以通过点击 Angular 落里的红色框来控制)，以便 OrangeMode == 它会停留在悬停状态，而不是 OrangeMode 它只会重新停留在状态上单击。

翻转函数可以很好地更改颜色，但此事件监听器的执行效果并不像我想要的那样。 (一旦你循环它确实可以工作，但对于任一状态并且它不运行橙色模式卸载。

任何帮助将不胜感激。

Answer 1

您需要输入“isTracking=true;”在命名函数内，因此您可以使用“removeEventListener”来取消该函数。这意味着您添加此功能:

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

然后你在点击时引用它而不是匿名函数:

circle.addEventListener('mouseover', trackCircle)

然后您只需在 else 中删除该事件即可:

circle.removeEventListener('mouseover', trackCircle)

哦，我会将其添加到顶部，这样您就不需要不断重复 getElementById 短语:

circle = document.getElementById("circle1");

希望有帮助。哦，这是对你的 fiddle 的编辑:

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