禁用按钮可在 Edge 浏览器上点击

问题描述

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

I have problem with Edge browser. In my web site I have buttons with span tags inside them. In this span tags I bind text and icons. So far I had no problem but on Edge browser it is possible to click on disabled buttons. After investigating problem I found out that, when button contains span tags inside, it is possible to click on button. Here is how it looks on my web site:

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

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

One option would be to hide buttons instead of disabling, but I prefer to disable them. Please suggest solution to over come this issue.

推荐答案

只需设置

指针事件:无；

用于禁用按钮.

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

Here's CSS to disable all disabled elements everywhere:

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

pointer-events 文档

这篇关于禁用按钮可在 Edge 浏览器上点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！