अक्षम बटन एज ब्राउज़र

Question

पर क्लिक करने योग्य है मुझे एज ब्राउज़र के साथ समस्या है। मेरी वेबसाइट में मेरे पास स्पैन टैग के साथ बटन हैं। इस अवधि टैग में मैं पाठ और आइकन बांधता हूं। अब तक मुझे कोई समस्या नहीं है लेकिन एज ब्राउज़र पर अक्षम बटन पर क्लिक करना संभव है। समस्या की जांच करने के बाद मुझे पता चला कि, जब बटन में स्पैन टैग होते हैं, तो बटन पर क्लिक करना संभव है।

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

यहां परीक्षण के लिए उदाहरण है:: यहाँ है कि यह कैसे अपने वेब साइट पर दिखता है

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

एक विकल्प को निष्क्रिय करने के बजाय बटन को छिपाने के लिए किया जाएगा, लेकिन मैं उन्हें निष्क्रिय करने के लिए पसंद करते हैं । इस मुद्दे पर आने के लिए समाधान का सुझाव दें।

Answer 1

यह माइक्रोसॉफ्ट एज में एक बग है। अक्षम बटन क्लिक स्वीकार करते हैं यदि उनमें कोई HTML तत्व शामिल है (यानी यदि उनमें केवल टेक्स्ट से कुछ और है)। माइक्रोसॉफ्ट कनेक्ट के माध्यम से

की सूचना दी कई बार:

• Event bubbles from child element into element (अतः उपयोगकर्ता रयान जोय द्वारा)
• Bootstrap/Jquery disabled buttons generate click events and show tooltips even disabled

बग अभी भी 10,565 बिल्ड (16 अक्टूबर 2015) में उपस्थित थे। नवंबर अद्यतन में तय किया गया था, का निर्माण 10586.

---

एक संभावित (लेकिन बदसूरत) वैकल्पिक हल हर बटन है, जो तब जांच करता है कि बटन अक्षम है और false रिटर्न के लिए onclick में कुछ जावास्क्रिप्ट कॉल करने के लिए है (इस प्रकार क्लिक घटना को दबाने)।

Answer 2

मैं चारों ओर एक काम AngularJS का उपयोग कर उदाहरण के लिए बेन नाडेल के ब्लॉग से प्रेरित है here

तो ले कर आए हैं:

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

जब से तुम हमेशा एक अवधि तत्व का उपयोग करने के लिए नहीं जा रहे हैं और शायद प्रत्येक तत्व प्रकार के लिए एक नया निर्देश नहीं बनाना चाहते हैं, तो एक सामान्य सामान्य कार्यवाही को एनजीक्लिक निर्देश को सजाने के लिए वास्तविक एनजीक्लिक के आंतरिक ईवेंट हैंडलर तक पहुंचने से रोकने के लिए होगा जब ईवेंट अक्षम तत्व पर निकाल दिया जाता है।

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

बस सेट

सूचक-घटनाओं: कोई नहीं;

विकलांग बटन