如何从引导按钮中删除 :active

Question

我有一个网站，其中有多个按钮。按下按钮后，我会填充一个列表，尽管我的问题是最后按下的按钮一直处于按下状态（具有 :active 类）。我考虑过使用 Angular 的 $timeout 来重置按钮，尽管 removeClass 函数不能解决问题。

我的观点是这样的：

    div(ng-controller='productButtonController')
    div(ng-repeat='product in products')
        div.col-md-4
            button.btn.btn-block.sell-button(id='{{product._id}}' ng-click='sell()'){{product.name}}

和我的控制器：

app.controller('productButtonController', ['$scope', '$timeout', 'productServices', 'flash',
    function($scope, $timeout, productServices, flash) {
        productServices.getProducts()
            .success(function(result) {
                $scope.products = result.data
            })
            .error(showErrorMessage(flash))

        $scope.sell = function() {
            console.log(this.product)
            that = this
            $('#' + that.product._id).removeClass('active')
        }
    }
])

Answer 1

如果您只是想覆盖引导按钮的焦点状态，您可以这样做：

.btn:focus{
    outline: none;
}

那么你的按钮应该是这样的：

<button class="btn btn-default">My button 1</button>

覆盖按钮状态的样式表在引导样式表之后加载也很重要。

编辑：

抱歉，上一步仅删除了轮廓。按钮的背景颜色仍然保持不变。

据我所知，由于引导程序不会将任何活动类附加到单击的元素，因此您需要更改按钮的 :focus 状态：

$('#' + that.product._id).blur();

让我知道这是否适合你。

Answer 2

1. 将 Angular $window 服务添加到您的依赖项中 控制器
2. 在文档的活动元素上调用 blur 方法，这将是 你的按钮。

$window.document.activeElement.blur();

见How do you clear the focus in javascript?。

Answer 3

Justin Poehnelt 的handy GIST 的这段代码优雅地解决了这个问题。

app.directive('blur', [function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.on('click', function () {
                element.blur();
            });
        }
    };
}]);

将 blur 属性添加到单击后需要模糊的按钮/元素。例如。

<button type="button" blur>Click me</button>