डेस्कटॉप ब्राउज़र स्पर्श घटनाओं का समर्थन करते हैं?

Question

मैं <canvas> का उपयोग करके एक बेहद सरल ड्राइंग ऐप प्रोटोटाइप करके एचटीएमएल 5 पर गति प्राप्त करने की कोशिश कर रहा हूं और ontouchstart और ontouchmove जैसी घटनाओं को स्पर्श करता हूं।

यह एंड्रॉइड एमुलेटर में ठीक दिख रहा है और काम कर रहा है जहां मैं स्पर्श घटनाओं को अनुकरण करने के लिए माउस क्लिक का उपयोग करता हूं। हालांकि, यह मेरे डेस्कटॉप ब्राउज़र में चलने पर बिल्कुल काम नहीं करता है (सफारी 5.1.1, विंडोज़ पर फ़ायरफ़ॉक्स 7)।

मैंने सोचा था कि माउस क्लिक ईवेंट को एमुलेटर के भीतर चलने वाले स्पर्श ईवेंट के रूप में व्याख्या किया जाएगा।

मुझे आश्चर्य है कि शायद डेस्कटॉप ब्राउज़र बस स्पर्श घटनाओं का समर्थन नहीं करते हैं।

Answer 1

फ़ायरफ़ॉक्स 6 और ऊपर स्पर्श ईवेंट का समर्थन करता है। संगतता तालिका here देखें।

MDN article on Touch Events

संपादित करें: यदि आप एक टचस्क्रीन या माउस के साथ परीक्षण कर रहे हैं? माउस इवेंट स्वचालित रूप से ईवेंट को स्पर्श करने के लिए अनुवाद नहीं करते हैं। माउस के साथ स्पर्श घटनाओं को अनुकरण करने के लिए this post देखें।

Answer 2

ontouchstart जावास्क्रिप्ट के लिए वेबकिट के आईफ़ोन संस्करण में एक जोड़ा जाएगा। आप इसका परीक्षण कर सकते हैं लेकिन केवल एक एमुलेटर पर।

Answer 3

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

पायलऊ के लिए, यहां मोबाइल उपकरणों पर क्लिक ईवेंट को रद्द करने का एक सरल उदाहरण है। कृपया ध्यान दें कि प्रश्न ड्राइंग के बारे में अधिक है जिसमें क्लिक ड्रैगिंग शामिल होगी, जिसमें पहचान के लिए थोड़ा और कोड की आवश्यकता होगी, लेकिन बुनियादी विचार समान है, उन घटनाओं को बाध्य करें जिन्हें आपको संभालने की आवश्यकता है। फिर e.preventdefault() मोबाइल ब्राउज़र को क्लिक प्रकार की घटनाओं को अनुकरण करने से रोक देगा।

$('#element').on('touchend click', function(e){ 

    // Do your onclick action now 

    // cancel the onclick firing 
    e.preventDefault(); 
});