动态创建的li元素点击后无法正常触发focus聚焦效果问题排查

相关代码 #

初始事件绑定与DOM结构：

// 事件委托绑定动态li的点击事件
$('#spell-check').on('click', 'li', function() { 
  $(this).focus()
});

<ul id="spell-check">
  <li tabindex="1">suggestion 2</li>
  <li tabindex="2">suggestion 1</li>
</ul>

场景说明：#spell-check是页面初始加载时就存在的静态元素，内部的li为后续动态插入的元素，初始现象为点击li后未出现预期的聚焦效果。

初步排查结论 #

最初的问题是没有手动编写焦点状态对应的CSS规则，添加如下自定义样式后，聚焦效果可以正常显示：

#spell-check li:focus {
  border: 1px solid blue;
}

浏览器默认样式差异原因 #

这里涉及Chrome（及Chromium内核浏览器）的默认交互逻辑：

• 鼠标点击触发非原生表单类可聚焦元素（比如加了tabindex属性的li、div）聚焦时，浏览器会默认隐藏自带的蓝色焦点轮廓，避免鼠标操作场景下出现多余的视觉干扰
• 键盘操作触发元素聚焦时（比如方向键导航、Tab键切换焦点），浏览器会主动显示默认焦点轮廓，给键盘操作用户明确的焦点位置提示

这就是为什么键盘事件触发li聚焦时不需要写自定义样式就能看到默认蓝框，鼠标点击触发时看不到的根本原因。

键盘触发聚焦的参考代码如下：

$('input').on('keyup', function(e) {
   var $spellSuggestList = $("#spell-check");
   // 按下向下方向键时聚焦第一个li
   if (e.keyCode == 40) {
     $("li:first-child", $spellSuggestList).focus();
     return
   }
})

开发建议 #

不要依赖浏览器默认的焦点样式做交互提示，不同浏览器、不同版本对默认焦点轮廓的显示逻辑存在差异，只要业务需要聚焦提示，就手动编写:focus状态的样式，保证各端表现一致。

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