Html 如何使用 Bootstrap 3 阻止按钮保持按下状态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23443579/
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 stop buttons from staying depressed with Bootstrap 3
提问by Robert Byers
How do you make a button in Bootstrap 3 undepress automatically after being clicked?
单击后如何使 Bootstrap 3 中的按钮自动松开？
To replicate my problem, make a page with some buttons, give them appropriate bootstrap classes (and include bootstrap):
要复制我的问题，请使用一些按钮创建一个页面，为它们提供适当的引导程序类（并包括引导程序）：
<input id="one" type="button" class="btn btn-default" value="one">
<input id="two" type="button" class="btn btn-primary" value="two">
Load the page and click on one of the buttons. It becomes depressed and highlighted until you click somewhere else on the page (using FF29 and chrome35beta).
加载页面并单击其中一个按钮。在您单击页面上的其他位置（使用 FF29 和 chrome35beta）之前，它会变得沮丧和突出显示。
Inspecting the input element while clicked and unclicked doesn't show any additional classes being attached and removed from it.
在单击和未单击时检查输入元素不会显示任何附加的类和从中删除的类。
Here's an example of Bootstrap buttons staying depressed: http://jsfiddle.net/52VtD/5166/
这是 Bootstrap 按钮保持按下状态的示例：http: //jsfiddle.net/52VtD/5166/
回答by abl
In your example, the buttons do not stay depressed. They stay focused. If you want to see the difference, do the following:
在您的示例中，按钮不会一直按下。他们保持专注。如果要查看差异，请执行以下操作：
- Click and hold on a button.
- Release. You will see that when you release the mouse the button's appearance changes slightly, because it is no longer pressed.
- 单击并按住一个按钮。
- 释放。您会看到，当您松开鼠标时，按钮的外观略有变化，因为它不再被按下。
If you do not want your buttons to stay focused after being released you can instruct the browser to take the focus out of them whenever you release the mouse.
如果您不希望按钮在释放后保持聚焦，您可以指示浏览器在您松开鼠标时将焦点从它们上移开。
Example
例子
This example uses jQuery but you can achieve the same effect with vanilla JavaScript.
此示例使用 jQuery，但您可以使用 vanilla JavaScript 实现相同的效果。
$(".btn").mouseup(function(){
$(this).blur();
})
回答by jme11
Or you can just use an anchor tag which can be styled exactly the same, but since it's not a form element it doesn't retain focus:
或者你可以只使用一个锚标签，它的样式可以完全相同，但由于它不是表单元素，它不会保留焦点：
<a href="#" role="button" class="btn btn-default">one</a>.
See the Anchor element section here: http://getbootstrap.com/css/#buttons
请参阅此处的锚元素部分：http: //getbootstrap.com/css/#buttons
回答by chris31389
The button remains focused. To remove this efficiently you can add this query code to your project.
按钮保持聚焦。要有效地删除它，您可以将此查询代码添加到您的项目中。
$(document).ready(function () {
$(".btn").click(function(event) {
// Removes focus of the button.
$(this).blur();
});
});
This also works for anchor links
这也适用于锚链接
$(document).ready(function () {
$(".navbar-nav li a").click(function(event) {
// Removes focus of the anchor link.
$(this).blur();
});
});
回答by naorz
Or angular way:
或角度方式：
function blurElemDirective() {
return {
restrict: 'E',
link: function (scope, element, attrs) {
element.bind('click', function () {
element.blur();
});
}
};
}
app.directive('button', blurElemDirective);
app.directive('_MORE_ELEMENT_', blurElemDirective);
Replace _MORE_ELEMENT_with your others elements.
用您的其他元素替换_MORE_ELEMENT_。
Or attribute way:
或者属性方式：
function blurElemDirective() {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element.bind('click', function () {
element.blur();
});
}
};
}
app.directive('blurMe', blurElemDirective);
Then add the attribute to your html element: blur-me
然后将属性添加到您的 html 元素：blur-me
<button blur-me></button>
回答by Drazen Bjelovuk
My preference:
我的偏好：
<button onmousedown="event.preventDefault()" class="btn">Calculate</button>
回答by Anthony Weber
It's the browser's focus since it's a form element (input).
You can easily remove the focusing with a little css
它是浏览器的焦点，因为它是一个表单元素 ( input)。您可以使用一点 css 轻松移除焦点
input:focus {
outline: 0;
}
Here's the fiddle with your example: http://jsfiddle.net/52VtD/5167/
这是你的例子的小提琴：http: //jsfiddle.net/52VtD/5167/
EDIT
编辑
Ah, I just saw now that the colour of the button itself changes too. Bootstrap changes the button of e.g. your btn-defaultbutton with this css:
啊，我刚刚看到按钮本身的颜色也发生了变化。Bootstrapbtn-default使用此 css更改例如您的按钮的按钮：
.btn-default:focus {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
If you don't want this behaviour, just overwrite it with your css.
如果您不想要这种行为，只需用您的 css 覆盖它。
回答by rnevius
This has to do with the :activeand :focuselement states. You need to modify the styles for those states for these buttons. For example, for the default button:
这与:active和:focus元素状态有关。您需要修改这些按钮的那些状态的样式。例如，对于默认按钮：
.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default {
color: #333;
background-color: #ccc;
border-color: #fff;
}
