पृष्ठ को अधिक प्रतिक्रियाशील बनाने के लिए ईवेंट हैंडलर को 'निष्क्रिय' मानने पर विचार करें

Question

मैं हथौड़े को घसीटने के लिए इस्तेमाल कर रहा हूं और अन्य सामान लोड करते समय यह टेढ़ा हो रहा है, क्योंकि यह चेतावनी संदेश मुझे बता रहा है।

मुख्य टच व्यस्त होने के कारण X टच के लिए 'टचस्टार्ट' इनपुट ईवेंट को संभालने में देरी हुई। पृष्ठ को अधिक प्रतिक्रियाशील बनाने के लिए ईवेंट हैंडलर को 'निष्क्रिय' मानने पर विचार करें।

इसलिए मैंने श्रोता की तरह to निष्क्रिय ’को जोड़ने की कोशिश की

Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});

लेकिन मुझे अभी भी यह चेतावनी मिल रही है।

Answer 1

पहली बार यह चेतावनी प्राप्त करने वालों के लिए, यह निष्क्रिय घटना श्रोताओं नामक एक रक्तस्रावी बढ़त विशेषता के कारण है जो कि हाल ही में (गर्मियों 2016) ब्राउज़रों में कार्यान्वित किया गया है। से https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md :

निष्क्रिय ईवेंट श्रोता डोम कल्पना में एक नई विशेषता है जो डेवलपर्स को टच और व्हील इवेंट श्रोताओं पर ब्लॉक करने के लिए स्क्रॉल करने की आवश्यकता को समाप्त करके बेहतर स्क्रॉल प्रदर्शन को चुनने में सक्षम बनाता है। डेवलपर्स टच और व्हील श्रोताओं को {निष्क्रिय: सच} के साथ एनोटेट कर सकते हैं ताकि यह इंगित किया जा सके कि वे कभी भी डेडफॉल्ट को रोक नहीं पाएंगे। यह सुविधा क्रोम 51, फ़ायरफ़ॉक्स 49 में भेज दी गई और वेबकिट में उतरी। पूर्ण आधिकारिक स्पष्टीकरण के लिए यहां और पढ़ें।

यह भी देखें: निष्क्रिय घटना सुनने वाले क्या हैं?

समर्थन को लागू करने के लिए आपको अपने .js पुस्तकालय की प्रतीक्षा करनी पड़ सकती है।

यदि आप जावास्क्रिप्ट लाइब्रेरी के माध्यम से अप्रत्यक्ष रूप से घटनाओं को संभाल रहे हैं, तो आप उस विशेष लाइब्रेरी की दया पर हो सकते हैं जो सुविधा के लिए है। दिसंबर 2019 तक, ऐसा नहीं लगता है कि किसी भी प्रमुख पुस्तकालय ने समर्थन लागू किया है। कुछ उदाहरण:

• jQuery.js - जारी समस्या: https://github.com/jquery/jquery/issues/2871
• React.js - जारी समस्या: https://github.com/facebook/react/issues/6436
• Hammer.js - बिना किसी कारण के बंद हुआ: https://github.com/hammerjs/hammer.js/pull/987
• परिपूर्ण-स्क्रॉलबार - बंद: https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - ठीक नहीं होने के कारण बंद: https://github.com/angular/angular.js/issues/15901

Comments

आयनिक पुस्तकालयों के बारे में क्या?

— abhit

मैं पुकार रहा हूं preventDefault()- क्या इस चेतावनी को दबाना संभव है?

— मजा

@maja नहीं - stackoverflow.com/questions/44060131/...

— Zze

Google मैप्स जावास्क्रिप्ट एपीआई संस्करण 3 भी इन चेतावनियों को उत्पन्न करता है। जारीकर्ता को जारी करने वाले पर नज़र रखी जा रही है । (विडंबना की तरह, यह देखते हुए कि Google Chrome उन उल्लंघनों के बारे में चेतावनी दे रहा है जो Google मैप्स जावास्क्रिप्ट एपीआई उत्पन्न करता है।)

— जोकेम शुलेंकोप्पर

इस चेतावनी को दबाने के लिए आप `addEventListener ('टचस्टार्ट', this.callPassedFuntion, {passive: false}) का उपयोग कर सकते हैं

— श्लोमी श्वार्ट्ज

Answer 2

यह चेतावनी संदेश छुपाता है:

jQuery.event.special.touchstart = {
  setup: function( _, ns, handle ) {
      this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
  }
};

Comments

वास्तविक घटना को रोकने के लिए लक्ष्य नहीं होगा? मैं संदेश को छिपाना नहीं चाहूंगा जब तक कि मैंने इस मुद्दे को संभाल नहीं लिया है।

— yaspenalty.com 16

मुझे लगता है कि यह एक पुस्तकालय का मुद्दा है। मुझे लगता है कि डेवलपर्स को इसे ठीक करना होगा। लेकिन अगर आप इसे प्राप्त करेंगे, तो कृपया मुझे बताएं कि यह कैसे करना है। बहुत बहुत धन्यवाद।

— इवान रोड्रिगेज

इवान के लिए! हाँ यही है। अरे, अब मैं उत्सुक हूं ... मैं d3 प्लगइन का उपयोग कर रहा हूं और मुझे 2300 उल्लंघन मिल रहे हैं। शायद आपका कोड मदद करेगा! मैं तुम्हें तैनात रखूँगा!

— yaspenalty.com 19

@ yaspenalty.com, नहीं, इवेंट रोकना लक्ष्य नहीं है! चेतावनी में आपने अपने श्रोता को यह निर्दिष्ट किए बिना रखा है कि क्या यह घटना पर डिफ़ॉल्ट व्यवहार को रोक सकता है या नहीं। यदि आपके पास ऐसे मामले हैं जहां आप कॉल करना चाहते हैं preventDefault(), तो आपको निर्दिष्ट करना चाहिए passive: false। यदि नहीं, तो निर्दिष्ट करें passive: true। यदि आप निर्दिष्ट नहीं करते हैं तो आपको केवल चेतावनी मिलती है। यदि आप निर्दिष्ट करते हैं passive: trueऔर preventDefault()कॉल करते हैं, तो यह एक त्रुटि के परिणामस्वरूप होता है और डिफ़ॉल्ट को रोका नहीं जाता है। निर्दिष्ट करना passiveयहां हैक नहीं है। इसका हल है । यह चेतावनी क्या माँगता है!

— ताओ

@tao टिप्पणी के लिए धन्यवाद। कुछ साल हो गए हैं लेकिन भविष्य में इसका समाधान मुझे जरूर याद होगा!

— yaspenalty.com

Answer 3

इसके अलावा Laravel में select2 ड्रॉपडाउन प्लगइन में यह मुठभेड़। अल्फ्रेड वालेस द्वारा सुझाए गए मान को बदलना

this.element.addEventListener(t, e, !1)

सेवा

this.element.addEventListener(t, e, { passive: true} )

समस्या हल करता है। उसका वोट डाउन क्यों है, मुझे नहीं पता, लेकिन यह मेरे लिए काम करता है।

Answer 4

विरासत के मुद्दों के साथ फंसे लोगों के लिए, त्रुटि फेंकने वाली रेखा ढूंढें और जोड़ें {passive: true}- जैसे:

this.element.addEventListener(t, e, !1)

हो जाता है

this.element.addEventListener(t, e, { passive: true} )

Answer 5

Jquery-ui-touchable के साथ jquery-ui-dragable के लिए मैंने इसे Iván Rodríguez के समान निर्धारित किया था, लेकिन टचमोव के लिए एक और घटना ओवरराइड के साथ:

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchstart', handle, { passive: !ns.includes('noPreventDefault') });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchmove', handle, { passive: !ns.includes('noPreventDefault') });
    }
};

Answer 6

मुझे एक समाधान मिला जो jQuery 3.4.1 स्लिम पर काम करता है

संयुक्त राष्ट्र के मिनिमाइजिंग के बाद, {passive: true}लाइन 1567 पर addEventListener फ़ंक्शन में जोड़ें जैसे:

t.addEventListener(p, a, {passive: true}))

कुछ भी नहीं टूटता है और प्रकाशस्तंभ ऑडिट श्रोताओं के बारे में शिकायत नहीं करते हैं।

Comments

पुस्तकालय के स्रोत कोड को कभी न बदलें; आपको इसके बजाय इसे ओवरराइड करना चाहिए।

— रैप्टर