JavaScript/jQuery：如何识别通过Tab键选中的元素？

我明白你遇到的困扰了——通过Tab键能选中带tabindex="0"的tr，但按下回车时this却指向了body，导致拿不到tr上的data-url属性。咱们一步步拆解问题，找到解决办法：

为什么原来的代码不生效？ #

你最初的写法$(document.activeElement).keypress(...)有两个核心问题：

• 页面加载完成时，document.activeElement默认是body，所以事件其实绑定在了body上，后续切换聚焦到tr时，事件并没有绑定到目标tr上；
• 就算换成$('tr:focus')，这个选择器只会选中当前瞬间聚焦的tr，一旦tr失去焦点再重新聚焦，新的聚焦状态下的tr不会自动带上事件绑定。

解决方案1：直接给目标tr绑定事件 #

给所有带tabindex="0"的tr绑定keypress事件，这样每个可聚焦的tr都能响应回车操作，而且this会正确指向当前触发事件的tr：

// 给所有可聚焦的tr绑定按键事件
$('tr[tabindex="0"]').keypress(function(event) {
    // 判断是否按下回车键
    if (event.which === 13) {
        // 手动指定this为当前tr，调用跳转函数
        onRowClick.call(this);
    }
});

function onRowClick() {
    const href = $(this).data('url');
    if (href) {
        window.location.href = href;
    }
}

解决方案2：事件委托（推荐，适配动态生成的tr） #

如果你的表格是动态生成的（比如异步加载数据后渲染），直接绑定事件可能会漏掉新添加的tr。这时候用事件委托更靠谱，把事件绑定到父元素（比如表格本身），监听子元素的事件：

// 把事件委托到表格，监听所有可聚焦tr的按键事件
$('#ChainResultsTable').on('keypress', 'tr[tabindex="0"]', function(event) {
    if (event.which === 13) {
        const href = $(this).data('url');
        if (href) {
            window.location.href = href;
        }
    }
});

这种方式的优势在于：不管tr是页面加载时就存在，还是后来动态添加的，只要符合tr[tabindex="0"]的选择器，按下回车都会触发跳转，而且this始终指向当前被聚焦的tr。

另外，你已经给tr设置了tabindex="0"，这一步是正确的，确保tr可以被Tab键聚焦，无需修改。

内容的提问来源于stack exchange，提问作者Stu Care