禁用按钮可在 Edge 浏览器上单击答案

【问题标题】：Disabled button is clickable on Edge browser禁用按钮可在 Edge 浏览器上单击
【发布时间】：2018-04-12 19:48:50
【问题描述】：

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

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

以下是测试示例：

<button type="button" disabled="disabled" onclick='alert("test");'>
    <span>Click me!</span>
</button>

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

【问题讨论】：

这似乎是一个错误。我在这里记录了它：connect.microsoft.com/IE/feedback/details/1748050
我投票结束这个问题，因为这是 Microsoft Edge 中的一个错误
@Popnoodles：这不会使问题偏离主题。这是主题，答案是“这是一个错误”。参见例如meta.stackoverflow.com/questions/268242/… 进行元讨论。
@sleske 是的，但是您没有足够的选择。最接近的可能是“题外话，因为......有关通用计算硬件和软件的问题对于 Stack Overflow 来说是题外话，除非它们直接涉及主要用于编程的工具。您可能能够获得有关超级用户的帮助。”

标签： html angularjs button microsoft-edge disabled-control

【解决方案1】：

刚刚设置

指针事件：无；

对于禁用的按钮。

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

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

pointer-events documentation

【讨论】：

太棒了！如果可以在 CSS 中完成，为什么要在 Javascript 中完成？

【解决方案2】：

这是 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 月更新版本 10586 中修复。

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

【讨论】：

我可以确认，这个错误现在已从 Build 25.10586.0.0 开始修复。
@RyanJoy：是的 - 您在 Microsoft Connect（上面链接）中打开的错误也已关闭。

【解决方案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",
        });
    }
);

【讨论】：

忘记在示例中添加浏览器检测，但我想您需要这样做。这也将覆盖所有跨度标签的点击，因此您可能想要定义自己的而不是覆盖这样一个原始标签

【解决方案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;
    }]);
}]);

【讨论】：