2012-12-02 15 views
26

लंबे समय तक, मैं यह पता लगाने का एक तरीका ढूंढ रहा हूं कि एक डोम तत्व का आकार या स्थिति कब बदल गई है। ऐसा इसलिए हो सकता है क्योंकि विंडो का आकार बदल गया था, या क्योंकि तत्व में नए बाल तत्व जोड़े गए थे, या क्योंकि इस तत्व के चारों ओर नए तत्व जोड़े गए थे, या क्योंकि सीएसएस नियम बदल गए हैं, या क्योंकि उपयोगकर्ता ने अपने ब्राउज़र का फ़ॉन्ट आकार बदल दिया है। ऐसे कई कारण हैं जिनके तत्व का आकार या स्थिति बदल जाएगी।क्या कोई डीओएम तत्व का आकार या स्थिति बदल गई है, यह पता लगाने के लिए कोई गैर-मतदान तरीका है?

मैं उन घटनाओं में से कई के लिए ईवेंट हैंडलर लगा सकता हूं, लेकिन मुझे लगता है कि ऐसे मामले हैं जो कवर नहीं हैं। मैंने म्यूटेशन ऑब्सर्वर का उपयोग केवल तत्व के ऑफ़सेट विदथ या क्लाइंटविड्थ को देखने के लिए किया था, लेकिन ऐसा लगता है कि वे केवल डोम विशेषताओं पर लागू होते हैं, नोड गुणों (या शायद यही वेबकिट लागू नहीं है)। तो, वास्तव में बुलेटप्रूफ होने के लिए, ऐसा लगता है कि मुझे किसी भी तरह से मतदान लूप चलाने की आवश्यकता होगी।

क्या यह सही है? क्या मुझे कुछ महत्वपूर्ण याद आया है? क्या तत्व का आकार या स्थिति बदल गई है, यह पता लगाने के लिए एकमात्र बुलेटप्रूफ तरीका मतदान कर रहा है?

संपादित

एक छोटे से अधिक संदर्भ प्रदान करने के लिए, यह किसी भी एक विशेष उपयोग के मामले तक सीमित नहीं है। मेरे लिए, यह समय और समय फिर से आया है। मेरी वर्तमान स्थिति में, मैं उम्मीद कर रहा था कि सीएसएस के माध्यम से सेट किया गया कैनवास, 100% चौड़ाई और उसके माता-पिता की ऊंचाई हो। मैं चाहता हूं कि एक स्क्रिप्ट कैनवास की चौड़ाई और ऊंचाई गुणों को समायोजित करे, जब उसकी ऑफ़सेटविड्थ या क्लाइंटविड्थ बदल जाए (यह वेबजीएल के लिए है, जहां चौड़ाई और ऊंचाई गुण फ्रेमबफर रिज़ॉल्यूशन को प्रभावित करते हैं)। एक अन्य प्रोजेक्ट में, मैं उपयोगकर्ता की ब्राउज़र विंडो में जो भी शेष स्थान था, उसे भरने के लिए ऊंचाई में एक तत्व विस्तार करना चाहता था। मैं इस स्थिति बार भर में फिर से आ गए हैं और, अनिवार्य रूप से, समाधान लगता है:

  1. किसी भी कोड है कि आप लिखते हैं कि डोम बदल सकता है में
  2. हुक window.resize को सुनें (या शायद का उपयोग उत्परिवर्तन घटनाक्रम या उत्परिवर्तन निरीक्षक)
  3. एक आवधिक मतदान संचालन को साफ करने के किसी भी मामले याद

है (ज्यादातर लोगों 1 में बंद हो, और हो सकता है 2 के एक छोटे से करते हैं)

मैं बस यह सुनिश्चित करना चाहता था कि मैं कुछ महत्वपूर्ण नहीं खो रहा था।

संयोग से, मेरी वेबजीएल स्थिति में, window.resize को सुनना पर्याप्त है (और कुछ हद तक बेहतर है, क्योंकि तब कैनवास आयाम और प्रतिपादन संकल्प एक ही समय में बदल जाता है)।

+1

शीर्षक के लिए: नहीं। अंतिम वाक्य के लिए: हाँ। आप जिस समस्या को हल करने की कोशिश कर रहे हैं वह बड़ी समस्या क्या है? –

+1

उत्परिवर्तन घटनाएं केवल डीओएम के लिए डिज़ाइन की गई हैं, कोई प्रदर्शन गुण या पसंद नहीं; वेबकिट सही ढंग से करता है। मुझे लगता है कि दस्तावेज लेआउट को रिफ्लो करते समय फायरिंग घटनाएं बहुत महत्वपूर्ण होंगी (प्रदर्शन के अनुसार, लेकिन त्रुटि भी)। – Bergi

+0

@ मैट बॉल - प्रारंभिक प्रश्न में संदर्भ प्रदान नहीं करने के लिए खेद है। मैं बेहतर जानने के लिए इतने लंबे समय तक पर्याप्त रहा हूं। –

उत्तर

3

एक सहकर्मी ने मुझे technique पर इंगित किया जो underflow और overflow ईवेंट का उपयोग करता है। मैंने कोशिश नहीं की है, और मुझे नहीं पता कि किस प्रकार का ब्राउज़र समर्थन है (क्रोम और फ़ायरफ़ॉक्स की तरह दिखता है, और इसे उसी ईवेंट को संश्लेषित करके आईई में काम करना चाहिए जो ब्राउजर की तलाश करेगा, लेकिन मुझे नहीं पता कि कौन से संस्करण तकनीक का समर्थन करें)।

+2

दिलचस्प बात यह है कि लेखक वह है जिसने सीएसएस एनिमेशन का उपयोग करके विज्ञापित किया। यहां उनकी मूल पोस्ट है: http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/ – Christophe

+1

यदि आपको आईई समर्थन की आवश्यकता है, तो लेखक के अद्यतन आलेख को पढ़ें, [क्रॉस-ब्राउज़र, ईवेंट आधारित, तत्व आकार का पता लगाने] [http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/)। – 10basetom

10

आप इसे सीएसएस एनिमेशन के साथ कर सकते हैं। http://developer.streak.com/2012/11/how-to-detect-dom-changes-in-css.html और इसी तरह की जांच करें। मुझे लगता है कि यह आपकी सभी आवश्यकताओं को संभाल नहीं पाएगा, अब जब मैं इसे और कुछ पढ़ता हूं।

+2

यह ... आश्चर्यजनक रूप से चालाक है। मुझे नहीं लगता कि यह सामान्य मामले में मेरी मदद करेगा, लेकिन मैं इसे अपने टूलबॉक्स में किसी भी तरह से टकरा दूंगा। आप कभी नहीं जानते कि यह कब आसान होगा। धन्यवाद! –

+0

उस पोस्ट का लिंक मृत है – Aras

+0

लिंक फिक्स्ड। – Pre101