Wyłączony przycisk można kliknąć w przeglądarce krawędzi

Question

Mam problem z przeglądarką krawędzi. Na mojej stronie mam guziki ze znacznikami span wewnątrz nich. W tym znaczniku zakresu wiążę tekst i ikony. Do tej pory nie miałem problemu, ale w przeglądarce Edge można kliknąć przyciski wyłączone. Po zbadaniu problemu dowiedziałem się, że gdy przycisk zawiera znaczniki span wewnątrz, można kliknąć przycisk. Oto jak to wygląda na mojej stronie internetowej:

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

Oto przykład do testowania:

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

Jedną z opcji byłoby zamiast ukryć przyciski wyłączania, ale wolę je wyłączyć . Proszę zaproponować rozwiązanie, aby rozwiązać ten problem.

Answer 1

To jest błąd w Microsoft Edge. Przyciski wyłączone akceptują kliknięcia, jeśli zawierają jakiekolwiek elementy HTML (tj. Jeśli zawierają coś więcej niż tekst).

Zgłoszone wielokrotnie przez Microsoft Connect:

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

Błąd był nadal obecny w 10565 budowlanej (16 października 2015). została ona ustalona w aktualizacji listopada Budowanie 10586.

---

Możliwym (ale brzydki) rozwiązaniem jest zadzwonić niektóre JavaScript w onclick dla każdego przycisku, który następnie sprawdza, czy przycisk jest wyłączony i powraca false (w ten sposób tłumiąc zdarzenie click).

Answer 2

Jeden obejść Doszedłem się z wykorzystaniem angularjs jest inspirowana blogu Ben Nadel za here

Tak na przykład:

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

Ponieważ jesteś nie zawsze będzie za pomocą elementu rozpiętości i prawdopodobnie nie chce tworzyć nowej dyrektywy dla każdego typu elementu, bardziej ogólnym rozwiązaniem byłoby dekorowanie dyrektywy ngClick, aby zapobiec zdarzeniu, aby zdarzenie miało postać wewnętrznego programu obsługi zdarzeń prawdziwego ngClick, gdy zdarzenie zostanie wywołane na wyłączonym elemencie.

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

Wystarczy ustawić

-pointer zdarzenia: brak;

przycisków niepełnosprawnych