Safari点击<button>元素后未将其设为document.activeElement的原因探究

嘿，这个问题我之前在项目里也碰到过！其实这是Safari浏览器和Chrome、Firefox之间的默认焦点行为差异造成的。

为什么会这样？ #

在Chrome和Firefox中，点击<button>元素时，浏览器会自动把焦点转移到这个按钮上，所以你在onclick事件里打印document.activeElement，得到的就是按钮本身。但Safari（包括你使用的14.1.1版本）在默认逻辑里，点击按钮并不会自动给它设置焦点——除非你是用键盘导航到按钮，或者按钮有特定的焦点触发条件。

Safari的这个设计初衷是优化鼠标/触摸操作的体验，避免按钮点击后出现不必要的焦点轮廓，影响视觉效果，但这就导致你点击按钮时，焦点还停留在<body>元素上，所以打印出来的结果不符合预期。

怎么解决？ #

如果想让Safari点击按钮后也能正确获得焦点，最简单的办法就是在点击事件里手动调用focus()方法：

<button onclick="this.focus(); console.log(document.activeElement)">
  console.log(document.activeElement)
</button>

这样修改后，再点击按钮，document.activeElement就会正确指向这个按钮了。另外，如果你担心焦点轮廓影响美观，可以用CSS的:focus-visible伪类来控制只有在键盘导航时才显示焦点样式，兼顾体验和功能。

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