点击事件在移动目标上未触发

Question

我正在编写一个JavaScript游戏，其中有一个移动的球。 当用户成功点击移动的球时，我想要一个警告消息。 目前它可以工作，但事件并不总是触发。看起来球移动得太快了，JS引擎无法注意到球确实被点击了。 我正在Firefox 18上测试，在一台5年前的CPU上运行Windows 7。

以下是我的一些代码片段：

myBall = document.getElementById("myBall");
function move(){
    myLeft += 20;
    myBall.style.left = myLeft + "px";
}    
myTimer = window.setInterval(move, 10);
...
myBall.addEventListener("click", function(){alert("win")});

有没有办法在一个小的移动目标上设置点击事件监听器，以使其行为更准确？使用jQuery会有什么不同吗？

- Jean

---

也许球移动得太快了，鼠标按钮无法按下和松开？您尝试添加“mousedown”事件监听器了吗？ - wassup

HTML5画布+Kinetic.js有很多很酷的选项-->我在www.threeblokesfromchina.com上有一个球的例子。 - IanO.S.

注意：如果鼠标在“mousedown”事件和“mouseup”事件中的坐标不同，则“click”事件将不会触发。也就是说，如果对象在“mousedown”和“mouseup”事件之间移动，“click”事件将不会触发。您可能应该考虑仅使用“mousedown”事件？ - techfoobar

@lucas和techfoobar：就是这样！太好了，谢谢。请将其添加为答案！ - Jean

@lucas - 你应该得到荣誉，因为你首先发布了正确的指针。你应该将其发布为答案。 - techfoobar

Answer 1

好的，为了解决您遇到的问题，您需要为mousedown添加事件监听器，而不是click。

这是因为click需要鼠标按钮同时按下和松开，并且-如@techfoobar所指出的那样-必须在目标元素的同一位置完成（如果mousedown和mouseup的坐标不相等，则不会触发click事件）。球移动得太快以至于无法满足上述条件，因此出现了问题。

- wassup