如何通过Tab键进入div时用jQuery执行指定操作？

你的问题出在div默认不是可聚焦元素，Tab键会直接跳过div，聚焦到内部的<a>标签。原代码监听的是.inside的keydown事件，只有当div本身获得焦点时按Tab才会触发，但默认情况下div无法被Tab聚焦，所以只有在内部元素之间切换Tab时，事件冒泡到div才会触发日志——这就是为什么需要按两次Tab才生效。

下面提供两种贴合需求的解决方案：

方案一：监听焦点进入div区域（推荐） #

利用focusin事件（支持事件冒泡），结合上一个聚焦元素的判断，实现“首次进入div内部”时触发操作：

let lastFocused = null;

$('.inside').on('focusin', function(e) {
  // 检查上一个焦点是否在当前div外部
  if (!$(lastFocused).closest('.inside').length) {
    console.log('Inside');
  }
  lastFocused = e.target;
});

原理： #

• focusin会在.inside或其子元素获得焦点时触发
• 通过对比上一个聚焦元素是否属于.inside，判断是否是首次进入该区域
• 无论Tab进入的是div内哪个元素，只要是从外部进来，就会触发一次操作

方案二：让div可直接聚焦 #

给.inside添加tabindex属性，使其成为可聚焦元素，然后监听focus事件：

修改HTML： #

<div class="inside text-center" tabindex="0">
  <a href="">Inside Link 1</a>
  <a href="">Inside Link 2</a>
  <a href="">Inside Link 3</a>
  <a href="">Inside Link 4</a>
</div>

jQuery代码： #

$('.inside').on('focus', function() {
  console.log('Inside');
});

注意： #

这种方式下，Tab键会先聚焦div本身，再聚焦内部的<a>标签，触发时机是div获得焦点时，适合需要直接聚焦div的场景。

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