Question

我有这个小提琴：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卸载。

非常感谢任何帮助。

Answer 1

你需要把'isTracking = true;'在命名函数内部，因此您可以使用“removeEventListener”来关闭该函数。这意味着你添加了这个功能：

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

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

circle.addEventListener('mouseover', trackCircle)

然后你只需在你的其他地方删除该事件：

circle.removeEventListener('mouseover', trackCircle)

哦，我会在顶部添加这个，所以你不需要继续重复getElementById短语：

circle = document.getElementById("circle1");

希望有所帮助。哦，这是你小提琴的编辑：

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

默认情况下在开始

1 个答案: