如何使用箭头键而不是鼠标阻止滚动?

时间:2009-06-29 04:32:54

标签: javascript jquery scroll arrow-keys

由于我正在使用jQuery,因此任何解决方案都可以使用。理想情况下,我想知道两者。

我已经将箭头键绑定到我页面上的另一个函数(使用jQuery),但是让它们导致页面滚动除此之外,会导致我出现问题。

我可能一次都知道这件事,但我不记得了。

3 个答案:

答案 0 :(得分:77)

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

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;
});

答案 1 :(得分:2)

在某些情况下,例如。如果你没有实际拥有一个你关注的元素,只需要点击一些区域,你可能对控制器没有太多的控制权,并且防止全局级别的事件最多可能有点片状(正如我发现的那样)出困难的方式)。

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

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

答案 2 :(得分:1)

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