Question

我构建了一个复杂的jquery-html游戏，我多次使用click事件。为了使它可访问我需要进行键盘导航...是否有任何jquery插件或任何方式使所有点击事件也使用回车键？例如：

<!DOCTYPE html>
<html>
 <head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
  </script>
  <script>
  $(document).ready(function(){
    $("p").click(function(){
      $(this).hide();
    });
  });
  </script>
  <style>p:focus {
  outline: 1px solid grey;
  }</style>
 </head>
 <body>
  <p tabindex="1">Par1</p>
  <p tabindex="2">Par2</p>
 </body>
</html>

如果我在一个段落聚焦时按回车键，那么没有任何反应......我想创建键盘事件并检测回车键，但这会非常繁琐......任何解决方案？

Answer 1

您需要使用http://api.jquery.com/keydown/这样的

来捕捉关键事件

$( "#target" ).keydown(function( event ) {
  switch(event.which) 
  {
    case 37 : //Arrow left
              break;
    case 39 : //Arrow left
              break;
    case 38 : //Arrow up
              break;
    case 40 : //Arrow down
              break;
  }
});

Answer 2

来自Document Object Model (DOM) Level 3 Events Specification

除了与指针设备关联外，还必须将click事件类型作为元素激活的一部分进行调度

这意味着，例如，如果激活链接，将触发click事件。因此，您可以将<p tabindex="1">…</p>替换为<a href="#" tabindex="1">…</a>并阻止默认操作。当然，这并不一定比任何其他提案更简单。

Answer 3

您可以在添加课程时使用虚拟焦点。可以应用于任何事件（鼠标或键盘）。

一点启发它如何运作

$( "#target" ).keydown(function( event ) {
  switch(event.which) 
  {
    case 37 : //Arrow left
              break;
    case 39 : //Arrow left
              break;
    case 38 : //Arrow up
              break;
    case 40 : //Arrow down
              break;
    case 13 : //Enter
              break;
    // next keys....

  }
});

http://jsfiddle.net/jirkaz/HA4m3/

使用键盘（箭头）移动活动类，并使用键Enter键获取活动div中的文本。

用jquery添加键盘导航

3 个答案: