如何使用Bootstrap 3停止button
如何在Bootstrap 3中点击button后自动取消button？
要复制我的问题，用一些button做一个页面，给他们适当的引导类（并包括引导）：
<input id="one" type="button" class="btn btn-default" value="one"> <input id="two" type="button" class="btn btn-primary" value="two"> 加载页面并单击其中一个button。 它变得郁闷，突出显示，直到你点击页面上的其他地方（使用FF29和chrome35beta）。
单击和取消点击时检查input元素不会显示任何附加的类被附加和删除。
下面是一个Bootstrapbutton的例子： http : //jsfiddle.net/52VtD/5166/
在你的例子中，button不会保持压低状态。 他们保持专注 。 如果您想查看差异，请执行以下操作：
- 点击并按住一个button。
- 发布。 你会看到，当你释放鼠标时，button的外观会稍微改变，因为它不再被按下。
如果你不想让你的button在发布后保持对焦状态，那么每当你释放鼠标时，都可以指示浏览器将焦点从它们中移出。
例
这个例子使用jQuery，但是你可以用vanilla JavaScript实现同样的效果。
$(".btn").mouseup(function(){ $(this).blur(); })
小提琴
或者你可以使用一个可以完全一样的锚标签，但是由于它不是一个表单元素，所以不能保留焦点：
<a href="#" role="button" class="btn btn-default">one</a>.
请参阅此处的锚元素部分： http ： //getbootstrap.com/css/#buttons
button保持焦点。 要有效地删除这个，你可以把这个查询代码添加到你的项目中。
$(document).ready(function () { $(".btn").click(function(event) { // Removes focus of the button. $(this).blur(); }); });
这也适用于锚链接
$(document).ready(function () { $(".navbar-nav li a").click(function(event) { // Removes focus of the anchor link. $(this).blur(); }); });
或angular度的方式：
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);
将_MORE_ELEMENT_replace为其他元素。
或者属性方式：
function blurElemDirective() { return { restrict: 'A', link: function (scope, element, attrs) { element.bind('click', function () { element.blur(); }); } }; } app.directive('blurMe', blurElemDirective);
然后将该属性添加到您的html元素： blur-me
<button blur-me></button>
这与:active :focus元素状态有关。 您需要修改这些button的状态的样式。 例如，对于默认button：
.btn-default:focus, .btn-default:active, .btn-default.active, .open .dropdown-toggle.btn-default { color: #333; background-color: #ccc; border-color: #fff; }
这是浏览器的焦点，因为它是一个表单元素（ input ）。 你可以轻松地删除一点点的CSS焦点
input:focus { outline: 0; }
这里是你的例子小提琴： http : //jsfiddle.net/52VtD/5167/
编辑
啊，我刚才看到button本身的颜色也改变了。 Bootstrap用这个CSS改变例如你的btn-defaultbutton的button：
.btn-default:focus { color: #333; background-color: #ebebeb; border-color: #adadad; }
如果你不想要这种行为，只要用你的CSS覆盖它。
我的偏好：
<button onmousedown="event.preventDefault()">Calculate</button>
