माउस के लिए ब्राउज़र क्षमताओं और चुनिंदा घटनाओं का पता लगाना और

Question

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

if(document.ontouchmove === undefined){ 
    //apply mouse events 
}else{ 
    //apply touch events 
} 

हालांकि, मेरी स्क्रिप्ट्स ने मेरे कंप्यूटर पर क्रोम 5 (जो वर्तमान में बीटा) में काम करना बंद कर दिया है। मैंने इसे थोड़ा सा शोध किया, और जैसा कि मैंने उम्मीद की थी, क्रोम 5 में (पुराने क्रोम, फ़ायरफ़ॉक्स, आईई, आदि के विपरीत) document.ontouchmove अब undefined लेकिन null नहीं है।

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

तो समाधान आसान लगता है: दोनों घटना प्रकारों को लागू करें। सही?

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

इस तक पहुंचने का तरीका क्या है? चुनिंदा घटनाओं की जांच करने और लागू करने का कोई बेहतर तरीका है, या क्या मुझे उन समस्याओं को अनदेखा करना चाहिए जो ब्राउज़र हो सकता है यदि ब्राउज़र कभी-कभी स्पर्श और माउस दोनों घटनाओं को आग लगते हैं?

Answer 1

एक डमी तत्व बनाने और इसे टच इवेंट हैंडलर संलग्न करने का प्रयास करें, फिर जांचें कि हैंडलर "फ़ंक्शन" प्रकार का है या नहीं। यह मूर्खतापूर्ण नहीं है हालांकि कुछ ब्राउज़र टच इवेंट हैंडलर को अनुमति देंगे हालांकि वे एक गैर-स्पर्श डिवाइस पर चल रहे हैं - लेकिन यह संभवतः उतना करीब है जितना आप प्राप्त करेंगे। तो, इस तरह कुछ:

var hasTouch = function() { 
    var dummy = document.createElement("div"); 
    dummy.setAttribute("ontouchmove", "return;"); 
    return typeof dummy.ontouchmove == "function" ? true : false; 
} 

हैप्पी कोडिंग!

Answer 2

स्पर्श घटनाओं को आग लगने पर माउस ईवेंट को अक्षम करने का प्रयास करें?

उदा .:

 
function touch_events() { 
document.onmousemove = null; 
... 
} 

function mouse_events() { ... } 

document.ontouchmove = touch_events; 
document.onmousemove = mouse_events; 

Answer 3

यह भी स्पष्ट है?

if(document.ontouchmove !== undefined || document.ontouchmove == null){ 
    //apply touch events 
}else{ 
    //apply mouse events 
} 

Answer 4

var support_touch = (टाइपो टच == "ऑब्जेक्ट");

Answer 5

ओला के जवाब की तरह, मैं बस एक साधारण काम करता है का पता लगाने लेकिन मैं यह भी है कि (जंगल की आग की तरह) विशेष रूप से विचित्र android उपकरणों में मिल पाया है हमेशा इस घटना को परिभाषित किया है नहीं है - यह मेरे लिए अच्छी तरह से काम करता है:

//detect capabilities 
this.is_touch_device = ('ontouchstart' in document.documentElement) || (navigator.userAgent.match(/ipad|iphone|android/i) != null); 

//if so do somemthing 
if (this.is_touch_device) { 
    //like publishing a custom event 
} 

(शायद ऐसा करने का एक बेहतर तरीका है :)

Answer 6

किया मैं इस गलत, या किया था प्रत्येक पोस्ट अब तक यहां एक सवाल यह है कि आप नहीं पूछा का जवाब? कम से कम अब आपके पास समर्थित घटनाओं की जांच करने के लिए वैकल्पिक तरीकों का भार है :)

वैसे भी, आपके प्रश्न के बारे में: मैं कहूंगा कि यह आपके द्वारा बनाई जा रही चीज़ों पर निर्भर करता है। मुझे लगता है कि जब आप "उस पर आधारित लागू चुनिंदा घटनाओं" लिखते हैं तो आपका मतलब है कि आप ईवेंट श्रोताओं और हैंडलर जोड़ना चाहते हैं? मुझे लगता है कि आप मल्टीटाउच (अभी तक) से निपट नहीं रहे हैं?

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

जब स्पर्श स्पर्श उपकरणों की बात आती है, तो एकल स्पर्श की बात करते हुए, मैं देख सकता हूं कि मेरा स्तर 10 (2.3.3) फोन दोनों घटनाओं को उत्पन्न करता है - माउस ईवेंट, इसलिए "क्लासिक" वेब (उन सभी onmousedown -events, आदि। ..) काम करेगा, टच इवेंट ... अच्छा, क्योंकि यह स्पष्ट रूप से एक स्पर्श डिवाइस है। लेकिन केवल यह जांचना कि जावास्क्रिप्ट एपीआई टचवेन्ट्स का समर्थन करता है, आपको इनपुट डिवाइस के बारे में कुछ भी नहीं बताता है, उदाहरण के लिए: कुबंटू डेस्कटॉप पर रिकोनक ब्राउज़र उपरोक्त उदाहरणों के लिए सच है - लेकिन टचस्क्रीन के साथ उपयोग किए जाने तक यह उन्हें कभी भी आग नहीं देगा।

शायद windows.navigator.userAgent के माध्यम से डिवाइस को अलग करना एक और व्यवहार्य दृष्टिकोण होगा?