焦点元素上的Tabindex 0（按钮）

Question

我在当前正在使用的代码库中多次注意到以下模式：

<button tabindex="0">A button</button>
<ul tabindex="-1">...

当然，tabindex="-1"上的ul会阻止焦点，但是在按钮上设置tabindex=0有什么意义呢？默认情况下该元素是否已经可以聚焦？

Answer 1

tabindex的两个用法都是多余的。 不需要它来获得焦点，而

不需要它来防止焦点。看起来像一个菜鸟写的代码。

Answer 2

仅详细说明一下tabindex的使用及其在这种情况下的含义：

Tabindex =“ 0”表示：使用Tab键和脚本可聚焦（使用element.focus()），并插入到自然Taborder中（又名DOM逻辑上的顺序）。由于这是按钮的默认行为，因此您可以将<button tabindex="0">抛为废话和膨胀代码。

Tabindex大于0会分配自定义Taborder。因此，如果您说<button tabindex="1">，则在使用制表符时，无论DOM结构如何，该按钮将始终首先聚焦。不建议使用此方法。

Tabindex =“-1”表示您无法使用Tab键将其聚焦，但是JavaScript element.focus()函数将起作用。在ul上，仅当您想在脚本中集中精力时才有意义。否则，这也是bloatcode，并且分配了意外角色。