javascript - 您可以将事件绑定(bind)到访问 key 吗？

Question

您可能知道，在 HTML 中有 accesskey 属性，它允许您为元素分配一个键，这样您就可以直接使用键盘触发/聚焦它们，而无需先按 Tab 键切换到它们。

现在我想知道，是否可以将 JS 事件绑定(bind)到那个确切的...事件，或者您是否必须采用老式的方式并监听 onkeypress(例如)和然后检查组合键？

后者会破坏目的，因为 browsers have different key combinations to trigger access keys .

我的想法是为(大型菜单)导航分配一个访问键，它将展开并聚焦它，这样您就可以通过链接切换。这样我就可以将导航放在 HTML 的末尾，这样用户就不必在数百个链接(夸张)中切换，就可以到达实际内容区域中的链接。

Answer 1

没有这样的事件，例如没有 onAccessKey 事件，您必须 Hook 其中一个 onkey* 事件。

但是，当使用 accesskey 时，accesskey 确实会触发元素的一些激活事件(使用 chrome 和 firefox 进行测试)。因此，您可以像往常一样简单地使用这些事件，就像用户单击、聚焦、更改 UI 的那部分一样。

1. 显示元素，即div、span等:
   • 点击
2. 输入元素，即文本、文本区域:
   • 专注，如果之前没有专注的话
   • 在某些浏览器中点击
3. 输入元素，即单选框、复选框:
   • 专注，如果之前没有专注的话
   • 点击
   • onchange，如果之前没有检查
4. 选择元素:
   • 专注，如果之前没有专注的话
   • onclick，如果之前没有选择
5. 选择元素选项(在选择元素上触发):
   • onfocus，如果选择框之前没有获得焦点
   • onclick，如果选择框之前没有被选中
   • onchange，如果之前没有选择选项

JSFiddle demo

使用它打开菜单的例子

html

<div id="menu">
    <div id="menuBtn" accesskey="r">Menu</div>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>    
</div>

js

jQuery("#menuBtn").click(function(){
   jQuery(this).next().toggle(); 
});

JSFiddle Demo