Question

由于某种原因，控制台继续说Uncaught TypeError：无法读取未定义的属性'clientX' 在moveCircle（script.js：5）但代码仍然在浏览器中工作。你能解释一下这个错误是如何出现在控制台中的吗？

1  const CIRCLE = document.querySelector(".circle");
2  const BODY = document.body;
3  
4  function moveCircle(e) {
5      CIRCLE.style.left = e.clientX + "px";
6      CIRCLE.style.top = e.clientY + "px";
7  }
8  
9  BODY.addEventListener("mousemove", moveCircle, false);
10 setInterval(moveCircle, 1);

Answer 1

moveCircle调用的函数setInterval没有事件对象。

事件moveCircle触发的功能mousemove将起作用。

为什么要通过moveCircle拨打setInterval？

Answer 2

对于这些类型的东西请使用window requestAnimationFrame（rAF），因为rAF或setTimeout不能直接访问事件，你最好的选择是在某处记录事件并从那里消耗它，或者存储最后的坐标并对它们进行操作。这样的事可能吗？

https://jsfiddle.net/ibowankenobi/8z5a5sgj/5/

var circle = document.querySelector(".circle");
var pos = [0,0];
document.getElementById("container").addEventListener("mousemove",updatePos,false);
window.requestAnimationFrame(move);


function updatePos(e){
    pos[0] = e.clientX || 0;
  pos[1] = e.clientY || 0
}
function move(){
    var diffX = pos[0] - circle.offsetLeft;
  var diffY = pos[1] - circle.offsetTop;
  if(diffX) {
    circle.style.left = circle.offsetLeft+Math.max(-5,Math.min(diffX/10,5))+"px";
  }
  if(diffY) {
    circle.style.top = circle.offsetTop+Math.max(-5,Math.min(diffY/10,5))+"px";
  }
  window.requestAnimationFrame(move);
}

e.clientX在控制台中是未定义的错误但仍然有效

2 个答案: