Question

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

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

当这个运行时，我可以看到firebug控制台并看到跟踪标签，如“A”和“INPUT”，我期望在我浏览文档时获得焦点。然而，它也跟踪一个“UL”标签。该文档有多个UL标签，只有这一个UL标签似乎得到了关注。

任何想法如何发生这种情况？具有焦点的UL标签没有属性（名称，ID等），因此我不知道它将如何被其他脚本修改。

（在firefox中运行。我正在查看的页面非常大，所以我不包含源代码，但UL标记没有属性，包含一些LI，其中一个LI包含标记）。 / p>

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

请注意，我并不是想弄清楚如何使UL成为可调焦的，而是想出它为什么可以集中精力。

Answer 1

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

Hovewer你可以通过添加 tabindex 属性强制关注html元素，例如：

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

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

这个“hack”应强制 UL 元素可聚焦（为我工作）

Answer 2

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

Answer 3

从WHATWG HTML Living Standard § 6.5.2. User interaction – Focus – Data model到2020年1月16日：

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

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

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

特别是，在明显可聚焦的元素，<area>和用户代理窗口小部件和默认值等明显情况下，4^th row中的the following table特别引起关注：

关注区域

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

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

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

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

请注意，指定tabindex="-1"将禁止其显示在标签导航顺序中；但是，它仍然可以保持聚焦。

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

3 个答案: