这里有两种可能的解决方案。

1.） 按钮类型=“按钮” 类名称=“btn-cart”onClick{（event）=>this.blur（event）}

2.)按钮类型="按钮" className="btn-cart" onclick={this.blur}

这两种解决方案都将删除按钮周围突出显示的部分 即-> blur()有自己的规范，它删除突出显示的部分周围。

使用focus-visible

注1:在下面列出的3个选项中，每个按钮的行为都是相同的(点击时没有焦点环)，但选择和输入的默认行为略有不同。只有选项3移除按钮、输入和选择周围的焦点环。请比较所有的方法，并确保您理解其中的含义。

注2:由于CSS的级联特性，CSS规则的顺序很重要。

注3:任何焦点可见方法都存在一些可访问性问题。也就是说，在浏览器公开一个配置让用户选择何时显示可见的焦点环之前，焦点-可见应该被认为在可访问性方面比一直在任何地方使用焦点环更差，但比在这个问题的其他答案中提到的有害的:focus {outline:none}方法要好。更多细节请参见答案底部的“关于可访问性的说明”部分。

选项1:使用:focus-visible伪类

focus-visible伪类可用于为非通过键盘(即通过触摸或鼠标点击)导航的用户删除按钮和各种元素上的轮廓和焦点环。

警告:截至2021年，:focus-visible伪类在现代浏览器中得到广泛支持，但在边缘浏览器中失败**。如果旧浏览器的支持很重要，下面选项2中的Javascript填充是最接近的。

/** * Remove focus styles for non-keyboard focus. */ :focus:not(:focus-visible) { outline: 0; box-shadow: none; } /** * Cross-browser styles for explicit focus via * keyboard-based (eg Tab) navigation or the * .focus-visible utility class. */ :focus, .focus-visible:focus:not(:focus-visible) { outline: 0; box-shadow: 0 0 0 .2rem #fff, 0 0 0 .35rem #069; } <h3>Defaults:</h3> <button>Foo</button> <input type="button" value="Bar"/> <select><option>Baz</option></select> <input type="text" placeholder="Qux"/> <textarea placeholder="Quux" rows="1"></textarea> <h3>Force focus on click:</h3> <button class="focus-visible">Foo</button> <input class="focus-visible" type="button" value="Bar"/> <select class="focus-visible"><option>Baz</option></select> <input class="focus-visible" type="text" placeholder="Qux"/> <textarea class="focus-visible" placeholder="Quux" rows="1"> </textarea>

选项2:使用.focus-visible polyfill

这个解决方案使用了一个普通的CSS类，而不是上面提到的伪类，并且有更广泛的浏览器支持(在2021年)。它需要1或2个javascript脚本添加到您的HTML;一个用于官方的焦点可见的polyfill，另一个用于不支持classList的旧浏览器。

注意:在Chrome中，polyfill似乎对待选择不同于原生的:焦点可见伪类。

/** * Cross-browser focus ring for explicit focus * via keyboard-based (eg Tab) navigation or the * .focus-visible utility class. */ :focus { outline: 0; box-shadow: 0 0 0 .2rem #fff, 0 0 0 .35rem #069; } /** * Remove focus ring for non-explicit scenarios. */ :focus:not(.focus-visible) { outline: 0; box-shadow: none; } <h3>Defaults:</h3> <button>Foo</button> <input type="button" value="Bar"/> <select><option>Baz</option></select> <input type="text" placeholder="Qux"/> <textarea placeholder="Quux" rows="1"></textarea> <h3>Force focus on click:</h3> <button class="focus-visible">Foo</button> <input class="focus-visible" type="button" value="Bar"/> <select class="focus-visible"><option>Baz</option></select> <input class="focus-visible" type="text" placeholder="Qux"/> <textarea class="focus-visible" placeholder="Quux" rows="1"> </textarea> <!-- place this code just before the closing </html> tag --> <script src="https://cdn.polyfill.io/v2/polyfill.js? features=Element.prototype.classList"></script> <script src="https://unpkg.com/focus-visible"></script>

选项3:使用全局键导航和鼠标导航状态

一个反解决方案的焦点可见，是禁用轮廓在鼠标移动，并使他们在keydown -> "Tab"。在这种情况下，您必须指定哪些元素应该显示大纲，而不是指定哪些元素不应该显示大纲。

document.addEventListener("mousemove", () => document.body.classList.remove("focus-visible") ); document.addEventListener("keydown", ({key}) => (key === "Tab") && document.body.classList.add("focus-visible") ); /** * Cross-browser focus ring for explicit focus * via keyboard-based (eg Tab) navigation or the * .focus-visible utility class. */ :focus { outline: 0; box-shadow: 0 0 0 .2rem #fff, 0 0 0 .35rem #069; } /** * Remove focus ring for non-explicit scenarios. */ body:not(.focus-visible) :focus:not(.focus-visible) { outline: 0 !important; box-shadow: none !important; } <h3>Defaults:</h3> <button>Foo</button> <input type="button" value="Bar"/> <select><option>Baz</option></select> <input type="text" placeholder="Qux"/> <textarea placeholder="Quux" rows="1"></textarea> <h3>Force focus on click:</h3> <button class="focus-visible">Foo</button> <input class="focus-visible" type="button" value="Bar"/> <select class="focus-visible"><option>Baz</option></select> <input class="focus-visible" type="text" placeholder="Qux"/> <textarea class="focus-visible" placeholder="Quux" rows="1"> </textarea>

关于可访问性的说明

删除所有焦点环la:focus {outline: none;}或:焦点{大纲:0;}是一个已知的可访问性问题，永远不建议使用。此外，在可访问性社区中，有些人希望你永远不要删除焦点环轮廓，而是让所有内容都具有:focus样式——如果样式适当，轮廓或框影都可以有效。

Finally, some folks in the accessibility community believe developers should not implement :focus-visible on their websites until all browsers implement and expose a user preference which lets people pick whether all items should be focusable or not. I personally don't subscribe to this thinking, which is why I provided this solution that I feel is far better than the harmful :focus { outline:none }. I think :focus-visible is a happy medium between design concerns and accessibility concerns. As of 2022, Chrome browser has exposed a user preference to set focus visibility styles, but FireFox has not.

资源:

https://css-tricks.com/keyboard-only-focus-styles/

演示:

https://wicg.github.io/focus-visible/demo/

我们遇到了类似的问题，并注意到Bootstrap 3 . 在他们的标签上没有问题(在Chrome中)。它看起来像他们使用的大纲风格，让浏览器决定什么是最好的，Chrome似乎做了你想要的:显示大纲时，聚焦，除非你只是点击元素。

对大纲样式的支持很难确定，因为浏览器要决定它的含义。最好检查几个浏览器，并有一个回退规则。

对于sass用户，引导4应该通过重写变量来操作。

如果你想禁用按钮周围焦点上的框影:

$btn-focus-box-shadow: none;

你也可以禁用输入周围焦点上的框影:

$input-focus-box-shadow: none;

或者两者都有一个变量:

$input-btn-focus-box-shadow: none;

虽然这里提供的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，也用于其他控件，所以如果你想使用它们和/或这个特定的变量不适合你，可能需要更多的研究。

将此添加到脚本中

$(document).ready(function() {
    $('#addBtn').focus(function() {
        this.blur();
    });
});