Il pulsante Disabilitato è selezionabile sul browser Edge

Question

Ho un problema con il browser Edge. Nel mio sito web ho dei pulsanti con tag span al loro interno. In questo tag di estensione lego testo e icone. Finora non ho avuto problemi ma sul browser Edge è possibile fare clic sui pulsanti disabilitati. Dopo aver esaminato il problema, ho scoperto che, quando il pulsante contiene tag di estensione, è possibile fare clic sul pulsante. Ecco come appare sul mio sito web:

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

Ecco esempio per i test:

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

Una possibilità potrebbe essere quella di nascondere i pulsanti al posto di disattivazione, ma preferisco disabilitarli . Si prega di suggerire una soluzione per venire questo problema.

Answer 1

Questo è un bug in Microsoft Edge. I pulsanti disabilitati accettano i clic se contengono elementi HTML (ad esempio se contengono altro che solo testo).

segnalati più volte tramite Microsoft Connect:

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

Il bug era ancora presente in Build 10565 (16 ottobre 2015). E 'stato risolto nell'aggiornamento novembre costruire 10586.

---

Una possibile (ma brutto) soluzione consiste nel chiamare alcuni javascript nel onclick per ogni pulsante, che poi controlla se il pulsante è disattivato e restituisce false (sopprimendo quindi l'evento click).

Answer 2

Un lavoro intorno mi è venuta in mente usando angularjs si ispira il blog di Ben Nadel here

Così, per esempio:

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

Dal momento che non sta andando sempre di utilizzare un elemento arco e probabilmente non si vuole creare una nuova direttiva per ogni tipo di elemento, una soluzione più generica sarebbe quella di decorare la direttiva ngClick per impedire all'evento di raggiungere il gestore di eventi interno del reale ngClick quando l'evento viene attivato su un elemento disabilitato.

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

Basta impostare

puntatore-eventi: nessuno;

per i pulsanti disabili