Question

出于本次测试的目的，我有一些基本的html：

<a href="https://www.google.co.uk" class="prev">Previous</a>
<a href="https://jsfiddle.net" class="next">Next</a>

我有一个相当简单的jquery函数：

var prev = $('.prev');
var next = $('.next');

$('body').on('keydown',function(e){
    if(e.which == 37){
    prev.trigger('click');
  }else if(e.which == 39){
    next.trigger('click');
  }
  console.log(e.which);
  e.preventDefault();
});

控制台正在记录按下的每个键，但这并没有将click事件绑定到每个href，我不知道为什么。

此外，我认为使用e.preventDefault();会阻止页面上的其他关键操作。在我的应用中的其他keyCode函数中，我没有使用return false或preventDefault();

是否可以将锚点包装在div中，并将keydown仅绑定到该容器，例如：

<div class="nav">
   <a href="https://www.google.co.uk" class="prev">Previous</a>
   <a href="https://jsfiddle.net" class="next">Next</a>
</div>

 $('.nav').on('keydown', function(){} // etc

我在这里有一个jsfiddle：https://jsfiddle.net/lharby/sva0a4d1/

Answer 1

你可以试试这个：

$('body').on('keydown',function(e){
    if(e.which == 37){
        $('a.prev')[0].click()
  }else if(e.which == 39){      
        $('a.next')[0].click()
  }

});

使用jQuery将箭头键绑定到导航

1 个答案: