Question

我的Edge浏览器有问题。在我的网站上，我有里面有span标签的按钮。在此span标签中，我绑定了文本和图标。到目前为止我没有问题，但在Edge浏览器上可以点击禁用的按钮。调查问题后我发现，当按钮里面包含span标签时，可以点击按钮。以下是我在我的网站上看到的内容：

Private Sub ComboBox1_Change()
    ComboBox1.ListRows = 4 'This should work, but it does not
    MsgBox (ComboBox1.ListCount) 'It always equals 8
End Sub

以下是测试示例：

＆＃13;

<button id="btnRefresh" type="button" class="btn btn-primary" ng-click="refresh()" ng-disabled="performingAction">
    <span ng-class="performingAction && action == 'refresh' ? 'fa fa-cog fa-spin' :'fa fa-refresh'"></span>
    <span>{{ refresh }}</span>
</button>

＆＃13;

一个选项是隐藏按钮而不是禁用，但我更喜欢禁用它们。请提出解决方案来解决这个问题。

Answer 1

这是Microsoft Edge中的错误。如果禁用按钮包含任何HTML元素（即，如果它们包含除文本之外的任何内容），则禁用按钮接受点击。

通过Microsoft Connect多次报告：

Event bubbles from child element into element（SO用户Ryan Joy）
Bootstrap/Jquery disabled buttons generate click events and show tooltips even disabled

该错误仍然存在于Build 10565（2015年10月16日）中。 修订于11月更新，Build 10586。

一种可能（但很难看）的解决方法是在onclick中为每个按钮调用一些Javascript，然后检查该按钮是否被禁用并返回false（从而抑制点击事件）。

Answer 2

只需设置

pointer-events：none;

用于禁用按钮。

这里的CSS禁用所有禁用的元素：

*[disabled] {
    pointer-events: none !important;
}

pointer-events documentation

Answer 3

我想出了一个使用angularjs的工作灵感来自Ben Nadel的博客here

例如：

angular.module('myModule').directive(
    "span",
    function spanDirective() {
        return ({
            link: function (scope, element, attributes) {
                element.bind('click', function (e) {
                    if (e.target.parentNode.parentNode.disabled || e.target.parentNode.disabled) {
                        e.stopPropagation();
                    }
                })
            },
            restrict: "E",
        });
    }
);

Answer 4

由于您并不总是使用span元素，并且可能不想为每种元素类型创建新指令，因此更通用的解决方法是装饰ngClick指令以防止当事件在禁用的元素上触发时，事件到达真正的ngClick的内部事件处理程序。

var yourAppModule = angular.module('myApp');
// ...
yourAppModule.config(['$provide', function($provide) {
    $provide.decorator('ngClickDirective', ['$delegate', '$window', function($delegate, $window) {
        var isEdge = /windows.+edge\//i.test($window.navigator.userAgent);

        if (isEdge) {
            var directiveConfig = $delegate[0];
            var originalCompileFn = directiveConfig.compile;

            directiveConfig.compile = function() {
                var origLinkFn = originalCompileFn.apply(directiveConfig, arguments);

                // Register a click event handler that will execute before the one the original link
                // function registers so we can stop the event.
                return function linkFn(scope, element) {
                    element.on('click', function(event) {
                        if (event.currentTarget && event.currentTarget.disabled) {
                            event.preventDefault();
                            event.stopPropagation();
                            event.stopImmediatePropagation();
                        }
                    });

                    return origLinkFn.apply(null, arguments);
                };
            };
        }

        return $delegate;
    }]);
}]);

在Edge浏览器上可以单击“禁用”按钮

4 个答案: