Disabled button is clickable on Edge browser

Question

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>

Here is example to testing:

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

Answer 1

Just set

pointer-events: none;

for disabled buttons.

Here's CSS to disable all disabled elements everywhere:

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

pointer-events documentation