javascript - 检测鼠标实际移动的时间，而不仅仅是页面移动的时间

Question

我在尝试在我的页面上创建导航时遇到了一个很大的问题。如果鼠标进入一个元素然后它会选择它，然后如果你使用箭头键它将选择相对于所选元素的元素。但是，当箭头键导致页面滚动时，这是一个问题，因为（取决于鼠标的位置）它将选择适当的元素，然后在页面移动后立即选择鼠标现在所在的项目（即使您没有不要移动鼠标）。

有谁知道如何解决这个问题？我尝试修改它，但我的解决方案似乎都不起作用。任何帮助表示赞赏，谢谢。

Answer 1

不确定我是否完全理解，但您应该能够结合使用mousemove和keypress事件：

$("#element").mousemove(function(e){
    alert("mouse moved");
});

$("#element").keypress(function(e){
    if (e.keyCode == 38 || e.keyCode == 40){ //up & down arrow keys
        e.preventDefault();
    }
});

Answer 2

听起来您应该绑定“鼠标进入时选择”事件mousemove并取消绑定所述事件mousestop。 mousestop它本身并不存在，因此您必须以某种方式创建它或使用插件（至少有一些插件，例如https://github.com/richardscarrott/jquery-mousestop-event/）。我认为这将是最简单的解决方案，但是您的 UI 似乎有点奇怪（您希望箭头键正常滚动页面并“选择”可能大于滚动大小的元素？）

Answer 3

尝试从检查箭头键的键盘事件处理程序返回 false：

element.onkeypress = function(ev) {
    // ...
    return false;
}

这将阻止浏览器对事件的“默认行为”，即滚动。这也适用于链接，例如：如果您从链接的click事件处理程序返回 false，则单击该链接不会自动跟随它。