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

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

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

虽然这里提供的CSS解决方案有效，

对于任何喜欢使用Bootstrap 4方式的人，就像官方Bootstrap主题指南中建议的那样， 这应该会有帮助:

按你们的习惯。SCSS文件(参见上面的指南^)，其中您添加了您的变量覆盖，添加以下变量来删除按钮的盒子阴影:

// import bootstrap's variables & functions to override them
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// override the variables you want (you can look them up in node_modules/bootstrap/scss/variables file, they're the ones that have the !default keyword at the end)
$btn-focus-box-shadow: none;

// option A: include all of Bootstrap (see the above guide for other options)
@import "node_modules/bootstrap/scss/bootstrap";

这对我很有用。

请注意，在bootstrap的变量文件中有许多变量用于box-shadow，也用于其他控件，所以如果你想使用它们和/或这个特定的变量不适合你，可能需要更多的研究。

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

例子:

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

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

试试其中一个吧:

大纲:0; 或 大纲:0 px; 或 大纲:没有;

而且 (美元).trigger(“模糊”);

你想要的是:

<button class="btn btn-primary btn-block" onclick="this.blur();">...

.blur()方法正确地删除了焦点高亮显示，并且不会弄乱bootstrap的样式。

这是工作，希望能帮到你

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