使用 JavaScript，如何判断用户是否向后切换？

Question

我有一个 HTML 链接，并且我想在用户通过 Tab 键离开该链接时执行一些操作 - 但前提是用户在文档中向前移动而不是向后移动。

是否有一种可靠的跨浏览器方法来检测用户使用 Tab 键浏览文档的方式，或者是否确实使用 Tab 键浏览文档？我绑定到 blur 事件，但这并不一定意味着用户正在按 Tab 键。

我已经查看过检查 document.activeElement 的值，或者源中前一个可聚焦元素的 hasFocus 属性，但是：

1. 这些看起来像是相对较新的添加，因此可能不会得到广泛支持，并且
2. 我不确定当 blur 事件触发时它们是否可以检查，因为即使用户正在按 Tab 键，我认为下一个元素也不会还得集中注意力。

Answer 1

您必须处理链接本身的 keydown 事件。

$("your link selector").keydown(function(evt){
    if (evt.which === 9)
    {
        if(evt.shiftKey === true)
        {
            // user is tabbing backward
        }
        else
        {
            // User is tabbing forward
        }
    }
});

检查这个 JSFiddle 示例，它检测特定链接上的向前和向后 Tab 键。

旁注：尽管我在答案中提供了 jQuery 代码，但您没有在问题上指定 jQuery 标记。既然您拥有 Javascript 和 jQuery 徽章，我想您将我的代码转换为纯 Javascript 将会很简单。

Answer 2

作为 Robert 的良好解决方案的替代方案，也许您可​​以利用 tabindex 属性？为您的 html 链接和其他“可选项”项目设置它。然后在javascript中检查它。

使用 tabindex 的解决方案： jsfiddle

副作用：元素也会对鼠标点击做出反应。他们会表现得正确。因此，这可能是好的副作用，也可能是坏的副作用，具体取决于您的需要。