div

2013-07-30 6 views
5

के अंदर टचवेन्ट/माउसईवेंट स्थानीय स्थिति मैं एक एचटीएमएल 5 एप्लीकेशन विकसित कर रहा हूं और अब मुझे एक उचित समन्वय प्रणाली में लक्ष्य div के अंदर एक उचित स्थानीय स्पर्श/माउस स्थिति प्राप्त करने में काफी मुश्किल समस्या का सामना करना पड़ रहा है।div

स्टैक ओवरफ्लो पर कई समाधान हैं लेकिन यह बात इतना आसान नहीं है।

"शास्त्रीय" समाधान लक्ष्य ऑफ़सेट की गणना करना और पेजएक्स और पेजवाई स्थिति से घटा देना है। बहुत से लोग JQuery offset फ़ंक्शन का उपयोग करते हैं लेकिन हमें कुछ स्थितियों में आईओएस पर यह छोटी गाड़ी (1.8.3) मिली है जब पृष्ठ स्क्रॉल किया गया है और इसमें नेस्टेड ज़ूम किए गए divs शामिल हैं।

स्थिति घटना अधिक जटिल है क्योंकि न केवल घोंसला वाले ज़ूम किए गए divs (सीएसएस zoom संपत्ति) हैं बल्कि विभिन्न सीएसएस परिवर्तन (एक्स और वाई अनुवाद) के साथ परतें भी हैं।

अंत में हमने लक्ष्य div में स्थानीय माउस/स्पर्श स्थिति की गणना करने के लिए अपना स्वयं का फ़ंक्शन लिखा है (WebKitCSSMatrix, MSCSSMatrix और अन्य ... का उपयोग कर)। यह 'लगभग' अच्छी तरह से काम करता है लेकिन अभी भी कुछ परिस्थितियों में सही नहीं है - खासकर जब नेस्टेड ज़ूम किए गए divs हैं।

तो मेरा सवाल यह है कि ऊपर वर्णित आवश्यकताओं पर विचार करते हुए एक लक्षित div के अंदर स्थानीय स्पर्श/माउस स्थिति की गणना करने के लिए कुछ सामान्य समाधान/पुस्तकालय है या नहीं ??

धन्यवाद।

सभी अच्छा दिन ...

+0

क्या कोई विशेष माउस/टच ईवेंट है जिसमें आप रुचि रखते हैं? पेजएक्स और पेजवाई को सीएसएस पिक्सल में मापा जाता है, इसलिए उन्हें ज़ूमिंग से प्रभावित नहीं होना चाहिए, सीएसएस पिक्सेल ज़ूमिंग के जरिए निरंतर हैं, अगर चीजें सही तरीके से काम कर रही हैं। –

उत्तर

0

एक माउस घटना पर आप 5 संपत्ति जोड़े से चयन करना होगा।

यहाँ 3 वे विस्तार

  • pageX/Y में कवर कर रहे हैं निर्देशांक CSS पिक्सेल में तत्व के सापेक्ष देता है:

    यहाँ एक उत्कृष्ट browser quirks reference कि अंतर बताते है।

  • clientX/Y सीएसएस पिक्सेल में व्यूपोर्ट के सापेक्ष निर्देशांक देता है।
  • screenX/Y डिवाइस पिक्सेल में स्क्रीन के सापेक्ष निर्देशांक देता है।
+0

बहुत बहुत धन्यवाद। यह एक बहुत अच्छा लेख है। दुर्भाग्यवश यह मेरे मूल प्रश्न का उत्तर नहीं है। – MalcomCZ

-1

यदि आप event.offsetX और event.offsetY का उपयोग करते हैं, तो इसे करना चाहिए। (क्षमा करें मुझे इसकी पुरानी पता है)

+0

टच इवेंट में ऑफसेटएक्स या ऑफ़सेट नहीं है। – Timmmm

+0

हाँ आप सही हैं ... मुझे पता था कि मैं क्या सोच रहा था ... lol – carinlynchin