Html 如何在单击时移除按钮周围的焦点
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19053181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to remove focus around buttons on click
提问by Sean Clark Hess
My buttons all have a highlight around them after I click them. This is in Chrome.
单击它们后，我的按钮周围都有一个突出显示。这是在 Chrome 中。
<button class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</button>
I am using Bootstrap with a theme, but I'm pretty sure that's not it: I was noticing this before on another project.
我正在使用带有主题的 Bootstrap，但我很确定不是这样：我之前在另一个项目中注意到了这一点。
It goes away if I use an <a>tag instead of <button>. Why? If I wanted to use <button>how would I make it go away?
如果我使用<a>标签而不是<button>. 为什么？如果我想使用<button>，我将如何让它消失？
回答by jerimiah797
I found this Q and A on another page, and overriding the button focus style worked for me. This problem may be specific to MacOS with Chrome.
我在另一个页面上发现了这个 Q 和 A，覆盖按钮焦点样式对我有用。此问题可能特定于使用 Chrome 的 MacOS。
.btn:focus {
outline: none;
box-shadow: none;
}
Note though that this has implications for accessibility and isn't advised until you have a good consistent focus state for your buttons and inputs. As per the comments below, there are users out there who cannot use mice.
但请注意，这对可访问性有影响，除非您的按钮和输入具有良好的一致焦点状态，否则不建议这样做。根据下面的评论，有些用户不能使用鼠标。
回答by cshotton
You want something like:
你想要这样的东西：
<button class="btn btn-primary btn-block" onclick="this.blur();">...
The .blur() method correctly removes the focus highlighting and doesn't mess up Bootstraps's styles.
.blur() 方法正确地移除了焦点突出显示并且不会弄乱 Bootstraps 的样式。
回答by pjs
my understanding is that the focus is first applied following the onMouseDownevent, so calling e.preventDefault()in onMouseDownmay be a clean solution depending on your needs. This is certainly an accessibility friendly solution, but obviously it adjusts the behaviour of mouse clicks which may not be compatible with your web project.
我的理解是，重点是首次应用于以下onMouseDown事件，因此调用e.preventDefault()中onMouseDown可能会根据您的需要一个干净的解决方案。这当然是一个可访问性友好的解决方案，但显然它会调整可能与您的 Web 项目不兼容的鼠标点击行为。
I am currently using this solution (within a react-bootstrapproject) and I do not receive a focus flicker or retained focus of buttons after a click, but I am still able to tab my focus and visually visualize the focus of the same buttons.
我目前正在使用此解决方案（在一个react-bootstrap项目中），并且在单击后我没有收到焦点闪烁或按钮的保留焦点，但我仍然能够标记我的焦点并在视觉上可视化相同按钮的焦点。
回答by Adam McKenna
回答by Alexis
Although it's easy to just remove outline for all focused buttons (as in user1933897's answer), but that solution is bad from the accessibility point of view (for example, see Stop Messing with the Browser's Default Focus outline)
虽然删除所有焦点按钮的轮廓很容易（如 user1933897 的回答），但从可访问性的角度来看，该解决方案是糟糕的（例如，请参阅停止与浏览器的默认焦点轮廓混淆）
On the other hand, it's probably impossible to convince your browser to stop styling your clicked button as focused if it thinks that it's focused after you clicked on it (I'm looking at you, Chrome on OS X).
另一方面，如果您的浏览器认为在您点击它后它已聚焦（我正在看着您，OS X 上的 Chrome），则可能无法说服您的浏览器停止将您点击的按钮样式化为聚焦。
So, what can we do? A couple options come to my mind.
所以，我们能做些什么？我想到了几个选项。
1) Javascript (jQuery): $('.btn').mouseup(function() { this.blur() })
1）Javascript（jQuery）： $('.btn').mouseup(function() { this.blur() })
You're instructing your browser to remove the focus around any button immediately afterthe button is clicked. By using mouseupinstead of clickwe're keeping the default behavior for keyboard-based interactions (mouseupdoesn't get triggered by keyboard).
您正在指示您的浏览器在单击按钮后立即移除任何按钮周围的焦点。通过使用mouseup而不是click我们保持基于键盘的交互的默认行为（mouseup不会被键盘触发）。
2) CSS: .btn:hover { outline: 0 !important }
2）CSS： .btn:hover { outline: 0 !important }
Here you turn off outline for hoveredbuttons only. Obviously it's not ideal, but may be enough in some situations.
在这里，您只关闭悬停按钮的轮廓。显然这并不理想，但在某些情况下可能就足够了。
回答by Menaka
This worked for me. I created a custom class which overrides the necessary CSS.
这对我有用。我创建了一个自定义类，它覆盖了必要的 CSS。
.custom-button:focus {
outline: none !important;
border: none !important;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
The -webkit-box-shadow will work for Chrome and safari browsers.
-webkit-box-shadow 将适用于 Chrome 和 safari 浏览器。
回答by Rob
This works for me, another solution not mentioned. Just throw it in the click event...
这对我有用，另一个没有提到的解决方案。只需将其放入点击事件中...
$(this).trigger("blur");
Or call it from another event/method...
或者从另一个事件/方法调用它...
$(".btn_name").trigger("blur");
回答by snobojohan
If you use the rule :focus { outline: none; }to remove outlines, the link or control will be focusable but with no indication of focus for keyboard users. Methods to remove it such with JS like onfocus="blur()"are even worse and will result in keyboard users being unable to interact with the control.
如果您使用规则:focus { outline: none; }删除轮廓，链接或控件将是可聚焦的，但不会指示键盘用户获得焦点。像 JS 这样的删除它的方法onfocus="blur()"更糟糕，会导致键盘用户无法与控件交互。
The hacks you can use, that are sort of OK, includes adding :focus { outline: none; }rules when users interacts with the mouse and remove them again if keyboard interaction is detected. Lindsay Evanshas made a lib for this: https://github.com/lindsayevans/outline.js
你可以使用黑客，那是某种确定的，包括添加:focus { outline: none; }规则，当用户用鼠标交互，如果检测键盘交互，再把它们去掉。Lindsay Evans为此制作了一个库：https: //github.com/lindsayevans/outline.js
But i would prefer to setting a class on the html or body tag. And have control in the CSS file of when to use this.
但我更愿意在 html 或 body 标签上设置一个类。并在 CSS 文件中控制何时使用它。
For example (inline event handlers is for demonstration purposes only):
例如（内联事件处理程序仅用于演示目的）：
<html>
<head>
<style>
a:focus, button:focus {
outline: 3px solid #000;
}
.no-focus a, .no-focus button {
outline: none;
}
</style>
</head>
<body id="thebody"
onmousedown="document.getElementById('thebody').classList.add('no-focus');"
onkeydown="document.getElementById('thebody').classList.remove('no-focus');">
<p>This her is <a href="#">a link</a></p>
<button>Click me</button>
</body>
</html>
I did put togheter a Pen: http://codepen.io/snobojohan/pen/RWXXmp
我确实把一支笔放在一起：http://codepen.io/snobojohan/pen/RWXXmp
But beware there are performance issues. This forces repaint every time the user switches between mouse and keyboard. More about Avoiding Unnecessary Paints http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
但要注意性能问题。每次用户在鼠标和键盘之间切换时，这都会强制重新绘制。更多关于避免不必要的油漆http://www.html5rocks.com/en/tutorials/speed/unnecessary-paints/
回答by Oscar Bola?os
I've noticed the same and even though it really annoys me, I believe there is no proper way of handling this.
我注意到了同样的情况，尽管它真的让我很恼火，但我相信没有正确的方法来处理这个问题。
I would recommend against all the other solutions given because they kill the accessibility of the button completely, so now, when you tab to the button, you won't get the expected focus.
我建议反对所有其他给出的解决方案，因为它们完全破坏了按钮的可访问性，所以现在，当你点击按钮时，你不会得到预期的焦点。
This should be avoided!
应该避免这种情况！
.btn:focus {
outline: none;
}
回答by toffee
I find a solution. when we focus, bootstrap use box-shadow, so we just disable it(not enough reputation, cannot upload image :( ).
我找到了解决办法。当我们聚焦时，bootstrap 使用 box-shadow，所以我们只是禁用它（没有足够的声誉，无法上传图像:(）。
I add
我加
.btn:focus{
box-shadow:none !important;
}
it works.
有用。
