<ul> 元素如何接收焦点事件？答案

【问题标题】：how could a <ul> element receive the focus event?<ul> 元素如何接收焦点事件？
【发布时间】：2009-12-22 18:25:36
【问题描述】：

我正在运行以下代码来跟踪在 HTML 文档中获得焦点的每个控件的 tagName：

$(function() {
    $("*").bind("focus", function() {
        console.log("tabbed " + this.tagName);
    });
});

当它运行时，我可以观察萤火虫控制台并看到它跟踪标签，如“A”和“INPUT”，我希望在我浏览文档时获得焦点。然而，它也追踪一个“UL”标签。文档有多个 UL 标签，似乎只有这一个 UL 标签成为焦点。

有什么想法会发生这种情况吗？具有焦点的 UL 标记没有属性（名称、id 等），所以我不知道它会如何被其他脚本修改。

（在Firefox中运行。我正在查看的页面很大，所以我不包括源代码，但是UL标签没有属性，包含一些LI，其中一个LI确实包含一个标签）。

根据Which HTML elements can receive focus?，可能是因为某些脚本在该 UL 标记上设置了 tabindex。我找不到任何这样的脚本。

请注意，我并不是要弄清楚如何使 UL 可聚焦，而是要弄清楚它为什么可聚焦。

【问题讨论】：

标签： javascript html focus

【解决方案1】：

处理焦点完全取决于浏览器的实现。

但是您可以通过添加 tabindex 属性来强制关注 html 元素，例如：

<ul tabindex="1">
    <li>item</li>
    <li>item</li>
</ul>

<ul tabindex="2">
    <li>item</li>
    <li>item</li>
</ul>

这个“hack”应该强制 UL 元素 可聚焦（对我有用）

【讨论】：

在这种情况下，我真的不希望 UL 可聚焦，并试图找出原因。它没有 tabindex 属性集。（这是火狐，没试过IE）
哎呀，抱歉误导性的回答:)
尝试使用以下命令删除 tabindex：$("ul").removeAttr('tabindex');如果这解决了问题，那么您应该重新检查包含的脚本:)

【解决方案2】：

如果 UL 内的 LI 之一包含 A 标签，则焦点事件（来自 A）可能正在传播到 UL。

【讨论】：

焦点不传播（气泡）

【解决方案3】：

截至 2020 年 1 月 16 日，来自WHATWG HTML Living Standard § 6.5.2. User interaction – Focus – Data model：

术语可聚焦区域用于指代可以成为键盘输入目标的界面区域。可聚焦区域可以是元素、元素的一部分或由用户代理管理的其他区域。

每个focusable area 都有一个DOM 锚点，它是一个Node 对象，表示可聚焦区域 在DOM 中的位置。（当 focusable area 本身是一个Node 时，它就是它自己的DOM anchor。）DOM 锚点 在某些 API 中用作 focusable area 当没有其他 DOM 对象来表示 focusable area 时。

下表描述了哪些对象可以是可聚焦区域。左列中的单元格描述了可以成为焦点区域的对象；右列中的单元格描述了这些元素的 DOM 锚点。（跨越两列的单元格是非规范示例。）

具体来说，在显式可聚焦元素、<area> 和用户代理小部件和默认值等明显案例中，the following table 的 4^th row 尤其令人感兴趣：

可对焦区域

being rendered 和非expressly inert 的元素的可滚动区域。
DOM 锚点

创建可滚动区域滚动的框的元素。
示例

CSS 'overflow' 属性的“滚动”值通常会创建一个可滚动区域。

除了用户代理特定的行为之外，最合理的解释是 <ul> 元素实际上被用作列表项的滚动容器，项目溢出创建了一个可滚动区域，并且用户代理（网络浏览器）做出了规定，以便容器的滚动功能可以根据 HTML 标准访问。

请注意，指定tabindex="-1" 将禁止它出现在选项卡导航顺序中；但是，它仍然可以保持焦点。

【讨论】：