我刚刚在MacOS和Chrome上使用按钮触发“转换”事件时遇到了同样的问题。如果阅读本文的人已经在使用事件监听器，您可以通过在操作之后调用.blur()来解决这个问题。

例子:

 nextQuestionButtonEl.click(function(){
    if (isQuestionAnswered()) {
        currentQuestion++;
        changeQuestion();
    } else {
        toggleNotification("invalidForm");
    }
    this.blur();
});

不过，如果您还没有使用事件侦听器，添加一个事件侦听器来解决这个问题可能会增加不必要的开销，像前面的回答提供的样式解决方案会更好。

迟到了，但谁知道这也许能帮到谁呢。 CSS看起来像这样:

.rhighlight{
   outline: none !important;
   box-shadow:none
}

HTML看起来像这样:

<button type="button" class="btn btn-primary rHighlight">Text</button> 

这样你就可以保留btn和它相关的行为。

与TS溶液反应

  const btnRef = useRef<HTMLButtonElement | null>(null);
  const handleOnMouseUp = () => {
    btnRef.current?.blur();
  };
  
  <button
    ref={btnRef}
    onClick={handleOnClick}
    onMouseUp={handleOnMouseUp}
  >
    <span className="icon-plus"></span> Add Page
  </button>

如果button:focus {box-shadow: none}不适合你，可能会有一些库添加边界，就像我的例子中使用的伪选择器::after。

所以我用以下解决方案删除了显示在焦点上的边界:

button:focus::after {
    outline: none;
    box-shadow: none;
}

.btn:focus:active {
  outline: none;
}

这将在点击时删除轮廓，但在点击时保持焦点(对于a11y)

这样效果最好

.btn-primary.focus, .btn-primary:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
}