इंटरनेट एक्सप्लोरर 9, 10 और 11 इवेंट कंस्ट्रक्टर काम नहीं करता है

Question

मैं एक ईवेंट बना रहा हूं, इसलिए DOM इवेंट कंस्ट्रक्टर का उपयोग करें:

new Event('change');

यह आधुनिक ब्राउज़रों में ठीक काम करता है, हालांकि इंटरनेट एक्सप्लोरर 9, 10 और 11 में, यह इसके साथ विफल रहता है:

Object doesn't support this action

मैं इंटरनेट एक्सप्लोरर (आदर्श रूप से पॉलीफ़िल के माध्यम से) कैसे ठीक कर सकता हूं? अगर मैं नहीं कर सकता, तो क्या मैं उपयोग कर सकता है?

Comments

"मैं इंटरनेट एक्सप्लोरर को कैसे ठीक कर सकता हूं?" xD

— contactmatt

Answer 1

MDN पर CustomEvent निर्माता के लिए एक IE पॉलीफ़िल है । IE के लिए CustomEvent जोड़ना और इसके बजाय काम करता है।

(function () {
  if ( typeof window.CustomEvent === "function" ) return false; //If not IE

  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

Comments

आपने सर मेरी जान बचाई। क्या पूर्ण प्रतिस्थापन करना सुरक्षित होगा? मेरा मतलब है, window.Event= CustomEventआखिरी लाइन पर करना।

— tfrascaroli

IE11 में यह window.Event = CustomEvent सेट करने के लिए सुरक्षित प्रतीत होता है, हाँ।

— कोरी एलिक्स

रुचि रखने वाले किसी व्यक्ति के लिए यह पता लगाना संभव हो जाता है कि आप IE में हैं (इस मामले के लिए) टाइपोफ़ (ईवेंट) की जाँच करके जो IE के अलावा सभी के लिए 'फ़ंक्शन' है जहाँ यह 'ऑब्जेक्ट' है। आप ऊपर दिए गए दृष्टिकोण का उपयोग करके इवेंट कंस्ट्रक्टर को सुरक्षित रूप से पॉलीफ़िल कर सकते हैं।

— यूआन स्मिथ

मैं सिर्फ इसी तरह के वर्कअराउंड की जांच कर रहा हूं StorageEventऔर typeof(StorageEvent)एमएस एज में काम नहीं करता। यह काम करता है: try { new StorageEvent(); } catch (e) { /* polyfill */ }।

— kamituel

यह विंडो को बदलने के लिए सुरक्षित नहीं हो सकता है। कस्टमएवेंट, यदि आप थर्ड पार्टी लाइब्रेरी का उपयोग कर रहे हैं जो IE डिफाइन किए गए कस्टमएवेंट कंस्ट्रक्टर का उपयोग करता है।

— सेन जैकब

Answer 2

मुझे लगता है कि आपकी समस्या को हल करने और क्रॉस-ब्राउज़र इवेंट निर्माण से निपटने का सबसे अच्छा उपाय है:

function createNewEvent(eventName) {
    var event;
    if (typeof(Event) === 'function') {
        event = new Event(eventName);
    } else {
        event = document.createEvent('Event');
        event.initEvent(eventName, true, true);
    }
    return event;
}

Comments

यह काम करता हैं! मुझे लगता है कि मुझे ऐसा करना चाहिए return eventताकि मैं इसे पास कर सकूं dispatchEvent()।

— नूमेनन

initEventपुराना और पदावनत है , आपको कम से कम आधुनिक तरीके का उपयोग करना चाहिए और एक गिरावट के रूप में, पदावनत तरीके का उपयोग करना चाहिए।

— vsync

@vsync इसे पदावनत किया जा सकता है, लेकिन आपके द्वारा लिंक किए गए डॉक्स "ईवेंट ()" की तरह विशिष्ट ईवेंट कंस्ट्रक्टरों का उपयोग करते हैं, जो कि वास्तव में यही पॉलीफ़िल की कोशिश कर रहा है, इसलिए वास्तव में कोई विकल्प नहीं है।

— reduckted

CustomEventdetailविकल्प के माध्यम से कस्टम डेटा पास करने की अनुमति देता है , और Eventनहीं करता है। क्या मै गलत हु?

— पॉट्सकी

CustomEvent IE9, 10 या 11 के लिए मेरे अपने अनुभव के अनुसार समर्थित नहीं है। एक ही अच्छा जवाब स्वीकार किया जा रहा है।

— अंडरईंग जेलीफ़िश

Answer 3

यह पैकेज जादू करता है:

https://www.npmjs.com/package/custom-event-polyfill

पैकेज को शामिल करें और निम्नलिखित के रूप में घटना को भेजें:

window.dispatchEvent(new window.CustomEvent('some-event'))

Comments

95 निर्भरताएँ?

— डेमियन रोश

@DamienRoche क्या आप "निर्भरता" के रूप में "डिपेंडेंट" को मिस कर सकते हैं? क्योंकि पैकेज में वास्तव में 0 निर्भरता है और (लेखन के समय तक) 102 आश्रित (यानी, पैकेज जो इस पर निर्भर हैं)। वह 102 आश्रित पैकेज शायद 95 वापस जूल में थे।

— फ्लू

मैं अच्छी तरह से खूनी था! : पी

— डेमियन रोशे

Answer 4

यदि आप HTML ईवेंट टॉगल ईवेंट जैसी सरल घटना को भेजने की कोशिश कर रहे हैं, तो यह इंटरनेट एक्सप्लोरर 11 के साथ-साथ अन्य ब्राउज़रों में भी काम करता है:

let toggle_event = null;
try {
    toggle_event = new Event("toggle");
}
catch (error) {
    toggle_event = document.createEvent("Event");
    let doesnt_bubble = false;
    let isnt_cancelable = false;
    toggle_event.initEvent("toggle", doesnt_bubble, isnt_cancelable);
}
// disclosure_control is a details element.
disclosure_control.dispatchEvent(toggle_event);

Comments

देख नहीं सकते कि आप पुराने IE पर चलने वाले कोड के साथ मिश्रण es6 let(और उपयोग क्यों नहीं कर रहे हैं var) .. यह शुरुआती लोगों को भ्रमित कर सकता है जो इसे कॉपी-पेस्ट करेंगे

— vsync

@vsync हिलाना मैं किया था उल्लेख संस्करण संख्या। मेरी व्यक्तिगत वेबसाइट केवल पिछले वर्ष IE11 को लक्षित कर रही थी, इसलिए पुराने संस्करणों में समर्थन की जांच करने के लिए मेरे साथ ऐसा कभी नहीं हुआ। (आज के अनुसार, मैं IE11 सादे HTML को स्टाइलशीट या स्क्रिप्ट के बिना परोसता हूं। लोगों को आगे बढ़ने की जरूरत है।) किसी भी स्थिति में, इंटरनेट एक्सप्लोरर का एकमात्र संस्करण अभी भी Microsoft द्वारा समर्थित है जैसा कि अप्रैल 2017 का संस्करण 11 है, इसलिए यह थोड़ा सा है विवादास्पद मुद्दा। मैं किसी को भी लक्षित करके एक असमर्थित ब्राउज़र का उपयोग करने के लिए प्रोत्साहित नहीं करूँगा। वेब एक खतरनाक जगह हो सकती है।

— पैट्रिक डार्क

यह उस बारे में बिल्कुल नहीं है, और दुनिया या कुछ भी बदलने की कोशिश करने के बारे में नहीं है। उदाहरण के लिए, प्रश्न के लिए शीर्षक विशेष रूप से IE 9और इसके बाद के संस्करण के लिए पूछता है, और शायद एक व्यक्ति जो इस थ्रेड को खोजने के लिए उत्तर चाहता है, वह विरासत बैंकिंग प्रणाली या व्यावसायिक ग्राहकों के लिए कुछ अन्य प्रणाली विकसित कर रहा है, जिनके कंप्यूटर पर कोई नियंत्रण नहीं है और हैं पुराने IE के साथ काम करने के लिए बाध्य। इसका Microsoft समर्थन से कोई लेना-देना नहीं है ..

— vsync

Answer 5

वहाँ एक polyfill सेवा है जो यह और दूसरों को आपके लिए पैच कर सकती है

https://polyfill.io/v3/url-builder/

 <script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>

Answer 6

custom-eventNPM पैकेज मेरे लिए खूबसूरती से काम किया

https://www.npmjs.com/package/custom-event

var CustomEvent = require('custom-event');

// add an appropriate event listener
target.addEventListener('cat', function(e) { process(e.detail) });

// create and dispatch the event
var event = new CustomEvent('cat', {
  detail: {
    hazcheeseburger: true
  }
});
target.dispatchEvent(event);

Comments

यह एक अच्छा जवाब है, लेकिन पहले से ही एक और एनपीएम पैकेज है जिसका जवाब दिया गया है।

— मिकमेकाना

उपयोगकर्ताओं को कई प्रकार के विकल्प देने में क्या गलत है?

— लीरन एच।

एक अधिक सामान्य पैकेज है npmjs.com/package/events-polyfill

— मार्कस जार्डेरोट

Answer 7

मैं व्यक्तिगत रूप से मैन्युअल रूप से बनाई गई घटनाओं को संभालने के लिए एक रैपर फ़ंक्शन का उपयोग करता हूं। निम्न कोड सभी Eventइंटरफेस पर एक स्थिर विधि जोड़ देगा (सभी ग्लोबल वैरिएबल Eventएक इवेंट इंटरफ़ेस में हैं) और आपको element.dispatchEvent(MouseEvent.create('click'));IE9 + जैसे फ़ंक्शन को कॉल करने की अनुमति देगा ।

(function eventCreatorWrapper(eventClassNames){
    eventClassNames.forEach(function(eventClassName){
        window[eventClassName].createEvent = function(type,bubbles,cancelable){
            var evt
            try{
                evt = new window[eventClassName](type,{
                    bubbles: bubbles,
                    cancelable: cancelable
                });
            } catch (e){
                evt = document.createEvent(eventClassName);
                evt.initEvent(type,bubbles,cancelable);
            } finally {
                return evt;
            }
        }
    });
}(function(root){
    return Object.getOwnPropertyNames(root).filter(function(propertyName){
        return /Event$/.test(propertyName)
    });
}(window)));

संपादित करें: सभी Eventइंटरफेस को खोजने के लिए फ़ंक्शन को केवल आपके द्वारा आवश्यक इवेंट इंटरफेस को बदलने के लिए एक सरणी द्वारा प्रतिस्थापित किया जा सकता है ( ['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */])।