如何移除按钮点击后的焦点状态，防止回车重复触发其点击事件？

我太懂你这个困扰了！点击按钮后明明已经操作完了，结果不小心按个回车又触发一次，outline: none只是把焦点的框框藏起来了，但按钮其实还攥着焦点不放，根本没解决核心问题对吧？

给你几个实用的解决方法，亲测有效：

方法一：点击后主动让按钮失焦（最直接） #

在按钮的点击事件里，调用blur()方法让它立刻失去焦点，这样后续按回车就不会再触发它的点击事件了。

你可以直接在HTML的点击事件里加：

<button type="button" onclick="test(); this.blur();">Click</button>

或者在JS函数里处理，这样代码更规整：

function test() {
  console.log(1);
  // 让当前点击的按钮失去焦点
  event.target.blur();
}

这里event.target就是被点击的那个按钮，blur()方法会直接移除它的焦点状态，完美解决回车误触的问题。

方法二：配合CSS优化焦点的可视性（兼顾可访问性） #

如果你担心完全去掉焦点会影响键盘用户的操作（比如用Tab键导航的用户），可以用:focus-visible伪类来优化——只在键盘导航时显示焦点，鼠标点击时自动隐藏焦点的视觉效果，再配合上面的JS失焦方法，兼顾体验和可访问性：

/* 鼠标点击后的焦点不显示轮廓，但键盘导航的焦点仍保留 */
button:focus:not(:focus-visible) {
  outline: none;
}

这个CSS规则的意思是：当按钮获得焦点，但不是通过键盘导航（比如鼠标点击）获得的，就隐藏焦点轮廓；如果是用Tab键切过来的，还是会显示焦点，方便键盘用户操作。

方法三：转移焦点到其他元素（备选方案） #

如果你不想让按钮失焦，也可以把焦点转移到页面上的其他元素，比如页面的body或者一个隐藏的辅助元素：

function test() {
  console.log(1);
  // 把焦点转移到body
  document.body.focus();
}

不过这个方法不如直接让按钮失焦来得直观，一般不推荐，除非你有特殊的页面焦点管理需求。

最后提醒一句：如果是面向公众的网站，尽量不要完全禁用所有焦点状态，不然键盘用户会很难操作你的页面，用focus-visible配合失焦的方法是比较稳妥的~

备注：内容来源于stack exchange，提问作者avishekdr