Chrome 47 में एक नई सुविधा है, जिससे यह समझना आसान हो जाता है कि उपयोगकर्ता आपकी साइट के साथ कैसे इंटरैक्ट करते हैं: InputDeviceCapabilities! थोड़ा पीछे जाएं और जानें कि यह क्यों ज़रूरी है.
डीओएम इनपुट इवेंट, लो-लेवल इनपुट इवेंट के ऊपर एक एब्स्ट्रैक्शन होते हैं. ये इवेंट, फ़िज़िकल डिवाइस इनपुट (उदाहरण के लिए, click
इवेंट को माउस,
टचस्क्रीन या कीबोर्ड से ट्रिगर किया जा सकता है). हालांकि, इसमें एक समस्या है: किसी इवेंट के लिए ज़िम्मेदार फ़िज़िकल डिवाइस की जानकारी पाने का कोई आसान तरीका नहीं है.
इसके अलावा, कुछ खास तरह के इनपुट, साथ काम करने से जुड़ी वजहों से "नकली" DOM इनपुट इवेंट जनरेट कर सकते हैं. ऐसा एक फ़र्ज़ी DOM इवेंट तब होता है, जब कोई उपयोगकर्ता टच स्क्रीन (जैसे, मोबाइल फ़ोन) पर टैप करता है. यह न सिर्फ़ टच इवेंट ट्रिगर करता है, बल्कि काम करने के लिहाज़ से माउस इवेंट भी ट्रिगर करता है.
इससे, माउस और टच इनपुट, दोनों के साथ काम करने पर डेवलपर को समस्याएं आती हैं. यह पता करना मुश्किल है कि mousedown
इवेंट, माउस से मिले नए इनपुट को दिखाता है या पहले से प्रोसेस किए गए touchstart इवेंट के लिए सिर्फ़ एक कम्पैटिबिलिटी इवेंट है.
नया InputDeviceCapabilities
एपीआई, UIEvent पर sourceCapabilities
ऑब्जेक्ट के ज़रिए, इनपुट इवेंट के सोर्स के बारे में जानकारी देता है.
ऑब्जेक्ट में एक firesTouchEvents
प्रॉपर्टी होती है, जो उपयोगकर्ता की कार्रवाई से इवेंट जनरेट होने के तरीके के आधार पर, true
या false
पर सेट होती है.
सवाल यह है कि इसका इस्तेमाल कहां किया जाना चाहिए?
आजकल कई डेवलपर, पॉइंटर इवेंट के अलावा टच-लेयर में इंटरैक्शन के लिए लॉजिक मैनेज करते हैं. इससे, डिफ़ॉल्ट रूप से "नकली" माउस इवेंट बनने से रोका जा सकता है. यह डिज़ाइन कई स्थितियों में अच्छा काम करता है. साथ ही, InputDeviceCapabilities का फ़ायदा पाने के लिए, इसे बदलने की ज़रूरत नहीं होती.
हालांकि, कुछ मामलों में आपको टच इवेंट को preventDefault नहीं करना होता. उदाहरण के लिए, आपको अब भी टैप से 'क्लिक' इवेंट भेजने और फ़ोकस बदलने की ज़रूरत है. इन मामलों में, MouseEvent.sourceCapabilities.firesTouchEvents
प्रॉपर्टी में मौजूद जानकारी की मदद से, टच और माउस पर आधारित इवेंट के लॉजिक को एक मॉडल में इकट्ठा किया जा सकता है. यह मॉडल, पॉइंटर इवेंट के लॉजिक को मैनेज करने के तरीके से मिलता-जुलता होता है. इसका मतलब है कि आपके पास इंटरैक्शन लॉजिक को मैनेज करने वाला सिर्फ़ एक कोड सेट हो सकता है. साथ ही, डेवलपर के पास पॉइंटर इवेंट के साथ काम करने वाले और न करने वाले ब्राउज़र के बीच लॉजिक शेयर करने का आसान तरीका होता है.
function addMouseEventListener(target, type, handler, capture) {
target.addEventListener(type, function(e) {
if (e.sourceCapabilities.firesTouchEvents)
return false;
return handler(e);
}, capture);
}
अच्छी बात यह है कि इसे रिक बायर्स ने पॉलीफ़िल किया है, ताकि इसका इस्तेमाल ज़्यादातर प्लैटफ़ॉर्म पर किया जा सके.
फ़िलहाल, यह एपीआई बहुत छोटा है. इसका मकसद, टच इवेंट से मिले माउस इवेंट की पहचान करने से जुड़ी एक खास समस्या को हल करना है.
InputDeviceCapabilities
का इंस्टेंस भी बनाया जा सकता है;
हालांकि, इसमें सिर्फ़ firesTouchEvents
शामिल है. आने वाले समय में, इस सुविधा को बढ़ाया जाएगा, ताकि उपयोगकर्ता के सिस्टम पर मौजूद सभी इनपुट डिवाइसों के बारे में ज़्यादा जानकारी मिल सके. हमें इस्तेमाल के उदाहरणों के बारे में आपका सुझाव/राय/शिकायत मिलना पसंद होगा.