एंड्रॉइड के गलत क्लाइंटएक्स और क्लाइंटवाई व्यवहार के लिए क्रोम के लिए वर्कअराउंड क्या है?

Question

एंड्रॉइड संस्करणों के लिए क्रोम में 16 और 18 (कम से कम) एक बग है जो clientX और clientY गलत तरीके से रिपोर्ट करता है। यदि पृष्ठ स्क्रॉल किया गया है तो clientX/Y के मान कम से कम touchstart ईवेंट के लिए गलत होंगे, हालांकि click ईवेंट नहीं है। यहां इसके लिए एक बग है:

https://code.google.com/p/chromium/issues/detail?id=117754

कौन इस उदाहरण में शामिल है, कि आप अपने आप कोशिश कर सकते हैं: http://codepen.io/simonsarris/full/dJcvn

ये उदाहरण: http://www.apprisant.com/tab/cd.html

मैं कैनवास यहाँ के साथ एक समान उदाहरण बना दिया है अन्य मोबाइल ब्राउज़रों (सादे पुराने एंड्रॉइड ब्राउज़र समेत) पर काम करते हैं लेकिन एंड्रॉइड के लिए क्रोम स्क्रॉल होने पर क्लाइंटएक्स/वाई (कम से कम कुछ) स्पर्श ईवेंट को तोड़ने लगता है।

दिलचस्प बात यह है कि क्लाइंटएक्स और क्लाइंट click ईवेंट पर नहीं टूटे हैं जैसे वे touchstart पर हैं।

मेरा सवाल यह है कि क्लाइंटएक्स और क्लाइंट ब्राउज़र में लगातार काम करने के लिए सबसे अच्छा कामकाज क्या है? ऐसा लगता है कि window.scrollX और window.scrollY साथ offsetting "हल" होगा मुद्दा है, लेकिन एक अच्छी युक्ति की आवश्यकता है: या

1. निर्धारित है कि ब्राउज़र पीड़ित है नहीं, अधिमानतः उपयोगकर्ता कुछ भी किए बिना और जाँच का सहारा के बिना userAgent (इसलिए विशिष्ट ब्राउज़र संस्करणों की कोई धारणा नहीं बनाते हैं)। दूसरे शब्दों में, हम कैसे बताते हैं कि कौन से ब्राउज़र clientX और clientY के लिए खराब मान हैं?
2. समस्या को हल करने के लिए और केवल उन ब्राउज़रों पर हल करें जहां इसे हल करने की आवश्यकता है (संभवतः, केवल एंड्रॉइड के लिए क्रोम और इसके केवल विशिष्ट संस्करण, जैसे कि भविष्य के संस्करण ठीक हो सकते हैं), लगता है कि window.scrollX/Y द्वारा ऑफसेट करना केवल एक चीज है यहां किया जाना है।

Answer 1

e.clientY (या X) के अनुसार e.pageY - window.scrollY का उपयोग करें।

e.pageY आपको यह बताएगा कि ईवेंट कहां हुआ था, और window.scrollY द्वारा ऑफसेट करने से स्क्रॉल के कारण ऑफ़-स्क्रीन "रिक्त स्थान हटा दी जाएगी"। आप सशर्त जांच कर सकते हैं कि e.pageY - window.scrollY === e.clientY, लेकिन कामकाज आपको सही मूल्य देता है, और आपको इसे किसी भी तरह से जांचने के लिए इसकी गणना करनी होगी, यह प्रति-अंतर्ज्ञानी होगा।

Answer 2

मैं यह जांच करना कि

<meta name="viewport" content="width=device-width, initial-scale=1">

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

Answer 3

आप कैनवास पर touchstart ईवेंट के लिए सब्सक्राइब कर सकते हैं और कैनवास के भीतर स्थिति प्राप्त करने के लिए .offset() और e.pageX का उपयोग कर सकते हैं।

$('#my-canvas').on('touchstart', function (startEvent) { 
    var offset = $(this).offset(); 

    $(this).on('touchmove', function (moveEvent) { 
     var pos = { 
      x: moveEvent.pageX - offset.left, 
      y: moveEvent.pageY - offset.top 
     } 
    }); 
});