Deaktivierte Schaltfläche ist an Edge-Browser anklickbar

Question

Ich habe ein Problem mit Edge-Browser. In meiner Website habe ich Schaltflächen mit span-Tags in ihnen. In diesen Span-Tags binde ich Text und Symbole. Bisher hatte ich kein Problem, aber im Edge-Browser ist es möglich auf deaktivierte Buttons zu klicken. Nach dem Untersuchen des Problems habe ich herausgefunden, dass, wenn die Schaltfläche Span-Tags enthält, es möglich ist, auf die Schaltfläche zu klicken. Hier ist, wie es auf meiner Website aussieht:

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

Hier ist beispielsweise zu Test:

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

Eine Möglichkeit wäre, Tasten zu verstecken, anstatt zu deaktivieren, aber ich ziehe sie deaktivieren . Bitte schlagen Sie eine Lösung vor, um dieses Problem zu umgehen.

Answer 1

Dies ist ein Fehler in Microsoft Edge. Deaktivierte Schaltflächen akzeptieren Klicks, wenn sie HTML-Elemente enthalten (d. H. Wenn sie etwas anderes als nur Text enthalten).

Berichtet mehrfach über Microsoft Connect:

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

Der Bug war noch vorhanden in Build 10565 (16. Oktober 2015). Es ist in der November-Update behoben wurde, Build 10586.

---

Eine mögliche (aber hässlich) Abhilfe ist, einige Javascript in onclick für jede Taste aufzurufen, die überprüft dann, ob die Schaltfläche deaktiviert ist und gibt false (wodurch das Klickereignis unterdrückt wird).

Answer 2

Eine Arbeit um Ich habe mit der Verwendung von AngularJS kommen von Ben Nadel Blog inspiriert here

So zum Beispiel:

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

Answer 3

Da Sie nicht immer ein span-Element einsetzen möchten und wahrscheinlich nicht eine neue Direktive für jeden Elementtyp erstellen möchten, wäre eine allgemeinere Abhilfe, die ngClick-Direktive zu dekorieren, um zu verhindern, dass das Ereignis den internen Event-Handler von real ngClick erreicht, wenn das Ereignis auf einem deaktivierten Element ausgelöst wird.

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; 
    }]); 
}]); 

Answer 4

Stellen Sie einfach

Zeiger-Ereignisse: none;

für Behinderte Tasten