真不敢相信居然没人贴出来。

使用标签而不是按钮。

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

小提琴

与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>

我在另一个页面上找到了这个问题和回答，覆盖按钮焦点样式对我有用。这个问题可能是Chrome的MacOS特有的。

.btn:focus {
  outline: none;
  box-shadow: none;
}

请注意，这对可访问性有影响，除非你的按钮和输入有一个良好的一致的焦点状态，否则不建议这样做。根据下面的评论，有些用户不能使用鼠标。

如果你想在鼠标下而不是键盘标签上完成轮廓的删除，并且你正在使用VueJS，下面是解决方案:

<button @mousedown="$event.preventDefault()">No Online On Click</button>

这基本上阻止它在点击时接收焦点，但任何其他接收焦点的方式都保持活跃。

对于想要一个纯css方式的人来说:

:focus:not(:focus-visible) { outline: none }

这也可以为链接等工作，和奖金，它保持键盘的可访问性。最后，它被不支持焦点可见的浏览器忽略

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

例子:

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

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