禁用按钮边缘的浏览器点击 [英] Disabled button is clickable on Edge browser

问题描述

我有边缘的浏览器问题。在我的网站我有在他们里面跨度标签按钮。在这个跨度标签绑定我的文字和图标。到目前为止，我没有任何问题，但在边缘的浏览器就可以点击禁用的按钮。调查问题后，我发现，当按钮包含内部span标签，可以点击按钮。这里是如何看起来在我的网站：

 ＆LT;按钮ID =btnRefresh类型=按钮级=BTN BTN-主要NG点击=刷新（）NG-禁用=performingAction＆GT ;
    ＆LT;跨度纳克级=performingAction＆放大器;＆安培;行动=='刷新''发发，齿轮发旋：发发刷新'＆GT;＆LT; / SPAN＆GT;
    ＆LT;跨度＆GT; {{}刷新}＆LT; / SPAN＆GT;
＆LT; /按钮＆GT;
 

下面是例子来测试：

\r

\r

＆LT;按钮式=按钮禁用=禁用的onclick ='警报（测试），'＆GT;\r
    ＆LT;跨度＆gt;点击ME＆LT;！/ SPAN＆GT;\r
＆LT; /按钮＆GT;

\r

\r

\r

一个选择是隐藏的按钮，而不是禁用，但我preFER禁用它们。请建议的解决方案来过这个问题。

解决方案

这是Microsoft边缘的错误。禁用的按钮点击接受，如果它们包含的任何HTML元素（即，如果它们包含任何的不仅仅是文本人）。

通过微软连接报道多次：

• 事件从子元素到元素气泡（由SO用户瑞安喜）


• 引导/ jQuery的残疾人按钮产生的单击事件并显示工具提示禁用甚至

该缺陷仍然是美元的构建10565（2015年10月16日）p $ psent。
它固定在十一月更新，构建10586。

---

一个可能（但丑陋的）的解决方法是调用一些JavaScript在的onclick 对每个按钮，然后检查该按钮将被禁用，并返回假（因此燮pressing click事件）。

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.

解决方案

This is a bug in Microsoft Edge. Disabled buttons accept clicks if they contain any HTML elements (i.e. if they contain anything else than just text).

Reported multiple times via Microsoft Connect:

• Event bubbles from child element into element (by SO user Ryan Joy)
• Bootstrap/Jquery disabled buttons generate click events and show tooltips even disabled

The bug was still present in Build 10565 (16 October 2015). It was fixed in the November update, Build 10586.

---

A possible (but ugly) workaround is to call some Javascript in onclick for every button, which then checks if the button is disabled and returns false (thus suppressing the click event).

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