确定焦点何时发生在元素外部

Question

我想看看以下是否可行:

• 确定是否发生焦点的元素外,无需使用文档级别全球选择如$(document),$(body),$(window)等由于性能的原因.
• 如果没有全球选择者就无法实现,请以可证明的理由解释自己.重要的是,我理解为什么这对于今天的最新技术是不可行的.
• 奖金回合:确定任务的最有效(计算时间)选择器/事件处理程序/插件.

我的实现包含一个非常简单的HTML导航栏,如下面的代码段所示.我在每个<a>标签之间进行原生键盘导航.第一个列表元素是标题,包含可见的锚点,第二个元素

<ul class="test">
  <li>
    <a href="#">Title</a>
  </li>
  <li>
    <ul>
      <li>
        <a href="#">Some link</a>
      </li>
      <li>
        <a href="#">Some link</a>
      </li>
      <li>
        <a href="#">Some link</a>
      </li>
      <li>
        <a href="#">Some link</a>
      </li>
    </ul>
  </li>
</ul>

这个导航栏的目标很简单:

1. 原生键盘选项卡或shift + tab从锚点到锚点.
2. 聚焦内部锚元素时显示下拉菜单.
3. 不关注任何内部锚元素时隐藏下拉菜单.

我有1和2,但由于上面列出的要求,3是棘手的.我知道这可以很容易地使用全局选择器来完成,但是这个挑战是要弄清楚并理解是否可以这样做.

$(document).ready(function() {
    dropdownMenu = $(".test > ul");
    dropdownMenu.hide();

    $(".test").focusin(function() {
        if (dropdownMenu.is(":hidden")) {
          dropdownMenu.show();
        }
    });
    // Some selector for some event here to handle the focus/clicks outside the $(".test") element
});

重要提示:我认为event.stopPropagation();,正如CSS技巧中所解释的- 停止事件传播的危险对于这个问题的范围是一种危险的技术,但是如果使用所述技术导致最有效的方法,那么我将欢迎它.

Answer 1

在没有全局选择器的情况下，这里的一种选择是短暂延迟关闭操作：

  var isVisible = false;

  $(".test").focusin(function() {
    if (dropdownMenu.is(":hidden")) {
      dropdownMenu.show();
    }
    isFocused = true;
  });

  $(".test").focusout(function() {
    isFocused = false;
    setTimeout(function() {
      if (!isFocused && dropdownMenu.is(":visible")) {
        dropdownMenu.hide();
      }
    }, 100);
  });

这有点繁琐，但可以保护您在使用 Tab 键时避免错误关闭。参见https://jsfiddle.net/d5fa5o8q/4/