Html 禁用按钮可在边缘浏览器上单击

我的边缘浏览器有问题。在我的网站上，我有带span标签的按钮。在这个span标签中，我绑定文本和图标。到目前为止，我没有问题，但在边缘浏览器上，可以单击禁用的按钮。在调查了这个问题之后，我发现，当按钮中包含span标记时，可以单击按钮。以下是它在我的网站上的外观：

<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>

{{refresh}}

以下是测试示例：

点击我！

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

通过Microsoft Connect多次报告：

• （SO用户Ryan Joy）

该缺陷仍然存在于构建10565中（2015年10月16日）。 它在11月份的更新版本10586中修复。

---

---

一个可能的（但丑陋的）解决方法是为每个按钮调用

onclick

中的一些Javascript，然后检查按钮是否被禁用并返回

false

（从而抑制点击事件）。

我想到的一个使用angularjs的解决方法是受Ben Nadel的博客启发的

例如：

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",
        });
    }
);

---

由于您并不总是使用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;
    }]);
}]);

刚定

指针事件：无

用于禁用的按钮

以下是禁用所有禁用元素的CSS：

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

---

这似乎是一个bug。我把它记录在这里：我投票结束这个问题，因为这是微软的一个错误Edge@Popnoodles：这并不会使问题偏离主题。这是一个主题，答案是“这是一个bug”。参见例如，了解元讨论。@sleske是的，但您没有足够的选项。最接近的可能是“离题，因为……有关通用计算硬件和软件的问题对于堆栈溢出来说是离题的，除非它们直接涉及主要用于编程的工具。您可能可以获得有关超级用户的帮助。”忘记在示例中添加浏览器检测，但我想您需要这样做。此外，这将覆盖所有span标记的单击，因此您可能希望定义自己的，而不是覆盖这样一个基本的span标记。我可以确认此错误现在已在Build 25.10586.0.0版本中修复。@RyanJoy:是-您在Microsoft Connect（上面链接）中打开的错误也已关闭。非常好！如果可以用CSS实现，为什么要用Javascript实现呢？