点击后移除按钮焦点状态

Question

我试图在单击按钮后删除按钮的焦点状态。问题是，一旦我单击一个按钮，然后如果我只是按 ENTER 键，则该按钮上的单击事件会再次起作用，而不是单击其他任何地方。

下面是我的代码-

<style>
button { outline: none } /** Many solutions mentioned this but this is just removing the view state */
</style>
<button type="button" onclick="test()">Click</button>
<script>function test() { console.log(1) }</script>

我尝试将

outline: none

添加到 CSS，但这并没有删除焦点状态下按钮的实际功能。

有什么办法可以解决这个问题吗？

Answer 1

您可以通过在

blur

fn -

 内调用以下内容来 

test

进行对焦

<script>function test() { console.log(1); document.activeElement?.blur?.(); }</script>