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

Detect when mouse actually moves, not just when the page moves

本文关键字：时间 移动 不仅仅是 检测 鼠标      更新时间：2023-09-26

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

有谁知道如何解决这个问题？我尝试修补它，但我的解决方案似乎都没有奏效。任何帮助不胜感激，谢谢。

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

不确定我是否完全理解，但您应该能够结合使用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();
    }
});

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

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

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

相关文章：