您可以将事件绑定到访问键吗？

Question

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

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

后者可能会达不到目的，因为浏览器有不同的组合键来触发访问键。

我的想法是为（大型菜单）导航分配一个访问键，该键将展开并聚焦它，这样您就可以通过选项卡浏览链接。这样我就可以将导航放在 HTML 的末尾，这样用户就不必在数百个链接（夸张）中按 Tab 键才能到达实际内容区域中的链接。

Answer 1

没有这样的事件，例如没有 onAccessKey 事件，您必须挂钩 onkey* 事件之一。

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

1. 显示元素，即div、span等：
   • 单击时
2. 输入元素，即文本，文本区域：
   • onfocus，如果之前没有聚焦
   • onclick 在某些浏览器中
3. 输入元素，即单选、复选框：
   • onfocus，如果之前没有聚焦
   • 单击时
   • onchange，如果之前没有检查过
4. 选择元素：
   • onfocus，如果之前没有聚焦
   • onclick，如果之前没有选择
5. 选择元素选项（在选择元素上触发）：
   • onfocus，如果选择框之前没有聚焦
   • onclick，如果之前未选择选择框
   • onchange，如果之前未选择选项

JSFiddle 演示

使用它打开菜单的示例

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 演示