如何防止使用箭头键而不是鼠标滚动？

Question

由于我使用的是 jQuery，因此任何通过它的解决方案都可以使用。 理想情况下，我想知道两者。

我已经将箭头键绑定到我的页面上的另一个函数（使用 jQuery），但是让它们导致页面除此之外滚动，会给我带来问题。

我可能曾经知道这一点，但我不再记得了。

Answer 1

添加文档级按键处理程序可以解决问题！

var ar=new Array(33,34,35,36,37,38,39,40);

$(document).keydown(function(e) {
     var key = e.which;
      //console.log(key);
      //if(key==35 || key == 36 || key == 37 || key == 39)
      if($.inArray(key,ar) > -1) {
          e.preventDefault();
          return false;
      }
      return true;
});

Answer 2

在某些情况下，例如。 当您实际上没有关注的元素，只有您必须单击的某个区域时，您可能无法对处理程序进行太多控制，并且在全局级别阻止事件充其量可能有点不稳定（正如我发现的那样）走出艰难的道路）。

在这些情况下，最简单的解决方案是绑定控制按钮的单击，并将焦点放在一个空的输入元素上，该元素位于 -9000px 的左侧。

然后，您可以通过 keydown 可靠地阻止事件，也不必担心阻止默认行为或其他全局侦听器，因为输入元素上的默认行为只会将光标向左和向右移动。

Answer 3

如果您添加文档级按键处理程序，它将在任何时候阻止页面上的正常滚动，不仅在您的元素具有焦点时，这可能是不希望的效果。