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

【问题标题】：How do I prevent scrolling with arrow keys but NOT the mouse?如何防止使用箭头键而不是鼠标滚动？
【发布时间】：2009-06-29 04:32:54
【问题描述】：

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

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

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

【问题讨论】：

阻止键盘键滚动活动帧的 UI 设计非常糟糕。我（和许多其他人）主要使用按键进行浏览，不得不在奇怪的页面上使用鼠标来阻止正确的键盘导航是非常令人沮丧的。当然，这样做可能有正当理由，但你应该确保你的理由就是其中之一。
是的。我的网络应用程序是一个编辑器；不是正式的网页。
我完全同意总是阻止浏览器的标准行为是糟糕的 UI 设计。但是在某些情况下这样做是完全可以的，恕我直言。就我而言，我需要它来防止当用户在列表中的备选方案之间切换时页面滚动。当焦点在列表之外时，页面将正常滚动。在列表内，页面将避免滚动，除非需要显示所选项目。

标签： javascript jquery scroll arrow-keys

【解决方案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;
});

【讨论】：

它处理 PgUp(33), PgDn(34), End(35), Home(36), Left(37), Up(38), Right(39), Down(40)
您应该使用非匿名函数并将该函数也绑定到 keyPress 事件。这样，当按钮被持续按下时，滚动就会停止。
诀窍是使用 onkeydown，而不是 onkeyup 和 e.preventDefault
你可以使用[ ... ].indexOf(key) != -1和addEventListener来消除那里对jquery的需要
补充@srcspider 所说的：或者，也许更惯用的说法是ar = new Set([...]) 和ar.has(key)。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：