टच और माउस

पहली बार फिर से साथ

Chris Wilson

Paul Kinlan

परिचय

करीब तीस सालों से, डेस्कटॉप कंप्यूटिंग का अनुभव, कीबोर्ड और माउस या ट्रैकपैड के ज़रिए मिलता रहा है. ये हमारे मुख्य इनपुट डिवाइस हैं. हालांकि, पिछले एक दशक में स्मार्टफ़ोन और टैबलेट ने इंटरैक्शन का एक नया पैराडाइम लाया है: टच. टच-सक्षम Windows 8 मशीनों के आने और अब टच-सक्षम Chromebook Pixel के रिलीज़ होने के बाद, टच अब डेस्कटॉप अनुभव का हिस्सा बन रहा है. सबसे बड़ी चुनौती यह है कि ऐसा अनुभव बनाया जाए जो न सिर्फ़ टच डिवाइसों और माउस डिवाइसों पर काम करे, बल्कि उन डिवाइसों पर भी काम करे जहां उपयोगकर्ता इनपुट के दोनों तरीकों का इस्तेमाल करेगा - कभी-कभी एक साथ!

इस लेख से आपको यह जानने में मदद मिलेगी कि ब्राउज़र में टच की सुविधाएं कैसे पहले से मौजूद होती हैं. साथ ही, आपको यह भी पता चलेगा कि अपने मौजूदा ऐप्लिकेशन में इस नई सुविधा को इंटिग्रेट करने का क्या तरीका है. साथ ही, यह भी बताया गया है कि माउस इनपुट के साथ टच को बेहतर तरीके से कैसे इस्तेमाल किया जा सकता है.

वेब प्लैटफ़ॉर्म में टच की स्थिति

iPhone, वेब ब्राउज़र में टच एपीआई के साथ आने वाला पहला लोकप्रिय प्लैटफ़ॉर्म था. ब्राउज़र के कई अन्य वेंडर ने भी iOS पर काम करने वाले एपीआई इंटरफ़ेस बनाए हैं. इन इंटरफ़ेस के बारे में अब "टच इवेंट वर्शन 1" स्पेसिफ़िकेशन में बताया गया है. टच इवेंट, डेस्कटॉप पर Chrome और Firefox के साथ-साथ iOS पर Safari और Android पर Chrome और Android ब्राउज़र पर काम करते हैं. साथ ही, ये Blackberry ब्राउज़र जैसे अन्य मोबाइल ब्राउज़र पर भी काम करते हैं.

मेरे सहयोगी बोरिस स्मस ने टच इवेंट के बारे में HTML5Rocks ट्यूटोरियल लिखा है. अगर आपने पहले कभी टच इवेंट के बारे में नहीं पढ़ा है, तो यह ट्यूटोरियल आपके लिए मददगार साबित हो सकता है. अगर आपने पहले कभी टच इवेंट का इस्तेमाल नहीं किया है, तो आगे बढ़ने से पहले वह लेख पढ़ें. ठीक है, मैं इंतज़ार करूंगा.

सब हो गया? अब आपके पास टच इवेंट के बारे में बुनियादी जानकारी है. टच की सुविधा वाले इंटरैक्शन लिखने में यह समस्या आ सकती है कि टच इंटरैक्शन, माउस (और माउस की तरह काम करने वाले ट्रैकपैड और ट्रैकबॉल) इवेंट से काफ़ी अलग हो सकते हैं. हालांकि, टच इंटरफ़ेस आम तौर पर माउस की तरह काम करने की कोशिश करते हैं, लेकिन यह एमुलेटर पूरी तरह से सही या पूरा नहीं होता. आपको इंटरैक्शन के दोनों स्टाइल के साथ काम करना होगा और हो सकता है कि आपको हर इंटरफ़ेस के लिए अलग से काम करना पड़े.

सबसे महत्वपूर्ण: उपयोगकर्ता के पास एक स्पर्श और एक माउस हो सकता है

कई डेवलपर ने ऐसी साइटें बनाई हैं जो स्टैटिक तौर पर यह पता लगाती हैं कि कोई एनवायरमेंट टच इवेंट के साथ काम करता है या नहीं. इसके बाद, वे यह मान लेते हैं कि उन्हें सिर्फ़ टच (न कि माउस) इवेंट के साथ काम करना है. अब यह गलत अनुमान है - इसके बजाय, सिर्फ़ इसलिए कि टच इवेंट मौजूद हैं, इसका मतलब यह नहीं है कि उपयोगकर्ता मुख्य रूप से उस टच इनपुट डिवाइस का इस्तेमाल कर रहा है. Chromebook Pixel और Windows 8 के कुछ लैपटॉप जैसे डिवाइसों में अब माउस और टच इनपुट के तरीकों का इस्तेमाल किया जा सकता है. आने वाले समय में यह और भी काम करेगा. इन डिवाइसों पर, उपयोगकर्ता ऐप्लिकेशन के साथ इंटरैक्ट करने के लिए, माउस और टच स्क्रीन, दोनों का इस्तेमाल करते हैं. इसलिए, "टच की सुविधा" और "माउस की ज़रूरत नहीं", दोनों अलग-अलग चीज़ें हैं. इस समस्या को "मुझे दो अलग-अलग इंटरैक्शन स्टाइल लिखने हैं और उनके बीच स्विच करना है" के तौर पर नहीं देखा जा सकता. आपको यह सोचना होगा कि दोनों इंटरैक्शन, एक साथ और अलग-अलग कैसे काम करेंगे. मैं अपने Chromebook Pixel पर अक्सर ट्रैकपैड का इस्तेमाल करती हूं. हालांकि, मैं स्क्रीन को छूकर भी काम करती हूं. किसी ऐप्लिकेशन या पेज पर, मैं उस समय जो भी आसान लगता है उसे करती हूं. दूसरी ओर, टचस्क्रीन वाले कुछ लैपटॉप के उपयोगकर्ता, शायद कभी भी टचस्क्रीन का इस्तेमाल न करें. इसलिए, टच इनपुट की मौजूदगी से माउस कंट्रोल को बंद नहीं किया जाना चाहिए या उसमें रुकावट नहीं आनी चाहिए.

माफ़ करें, यह पता लगाना मुश्किल हो सकता है कि उपयोगकर्ता के ब्राउज़र एनवायरमेंट में टच इनपुट की सुविधा काम करती है या नहीं.आम तौर पर, डेस्कटॉप मशीन पर मौजूद ब्राउज़र में हमेशा टच इवेंट की सुविधा काम करती है, ताकि किसी भी समय टचस्क्रीन डिसप्ले अटैच किया जा सके. उदाहरण के लिए, अगर KVM के ज़रिए अटैच किया गया टचस्क्रीन उपलब्ध हो जाता है. इन सभी वजहों से, आपके ऐप्लिकेशन को टच और माउस के बीच स्विच करने की कोशिश नहीं करनी चाहिए. इन दोनों का इस्तेमाल किया जा सकता है!

माउस और टच पैनल, दोनों का इस्तेमाल करने की सुविधा

#1 - क्लिक और टैप करना - चीज़ों का "सामान्य" क्रम

पहली समस्या यह है कि टच इंटरफ़ेस आम तौर पर माउस क्लिक की नकल करने की कोशिश करते हैं. ऐसा इसलिए होता है, क्योंकि टच इंटरफ़ेस को उन ऐप्लिकेशन पर काम करना होता है जो पहले सिर्फ़ माउस इवेंट के साथ इंटरैक्ट करते थे! इसका इस्तेमाल शॉर्टकट के तौर पर किया जा सकता है. ऐसा इसलिए, क्योंकि "क्लिक" इवेंट तब भी ट्रिगर होते रहेंगे, जब उपयोगकर्ता ने माउस से क्लिक किया हो या स्क्रीन पर अपने उंगली से टैप किया हो. हालांकि, इस शॉर्टकट में कुछ समस्याएं हैं.

सबसे पहले, आपको बेहतर टच इंटरैक्शन डिज़ाइन करते समय सावधानी बरतनी होगी: जब उपयोगकर्ता माउस का इस्तेमाल करता है, तो क्लिक इवेंट के ज़रिए जवाब मिलेगा. हालांकि, जब उपयोगकर्ता स्क्रीन को छूता है, तो टच और क्लिक, दोनों इवेंट ट्रिगर होंगे. एक क्लिक के लिए, इवेंट का क्रम यह है:

1. टचस्टार्ट
2. touchmove
3. touchend
4. माउसओवर
5. mousemove
6. mousedown
7. mouseup
8. क्लिक

इसका मतलब है कि अगर touchstart जैसे टच इवेंट को प्रोसेस किया जा रहा है, तो आपको यह पक्का करना होगा कि आप उससे जुड़े mousedown और/या क्लिक इवेंट को भी प्रोसेस न करें. अगर आप टच इवेंट (इवेंट हैंडलर में कॉल preventDefault()) को रद्द कर सकते हैं, तो टच के लिए कोई भी माउस इवेंट जनरेट नहीं होगा. टच हैंडलर का सबसे अहम नियम यह है:

हालांकि, इससे ब्राउज़र के अन्य डिफ़ॉल्ट फ़ंक्शन भी बंद हो जाते हैं, जैसे कि स्क्रोल करना. हालांकि, आम तौर पर ऐसा हो सकता है कि आप अपने हैंडलर में टच इवेंट को पूरी तरह से मैनेज कर रहे हों और आप डिफ़ॉल्ट कार्रवाइयों को बंद करना चाहें. आम तौर पर, आपको सभी टच इवेंट को हैंडल और रद्द करना होगा या उस इवेंट के लिए हैंडलर से बचना होगा.

दूसरा, जब कोई उपयोगकर्ता मोबाइल डिवाइस पर किसी वेब पेज के एलिमेंट पर टैप करता है, तो मोबाइल इंटरैक्शन के लिए डिज़ाइन नहीं किए गए पेजों में, टचस्टार्ट इवेंट और माउस इवेंट (mousedown) की प्रोसेसिंग के बीच कम से कम 300 मिलीसेकंड की देरी होती है. यह काम Chrome का इस्तेमाल करके किया जा सकता है. आपके पास Chrome डेवलपर टूल में "टच इवेंट की संख्या कम करने" को चालू करने का विकल्प है. इससे आपको बिना टच वाले सिस्टम पर टच इंटरफ़ेस की जांच करने में मदद मिलेगी!

यह देरी इसलिए दी जाती है, ताकि ब्राउज़र यह तय कर सके कि उपयोगकर्ता कोई दूसरा जेस्चर कर रहा है या नहीं. खास तौर पर, डबल-टैप करके ज़ूम करना. जाहिर है, ऐसे मामलों में यह समस्या हो सकती है जहां आपको उंगली के टच पर तुरंत रिस्पॉन्स चाहिए. जिन स्थितियों में यह देरी अपने-आप होती है उन्हें सीमित करने के लिए, इस पर काम जारी है.

इस देरी से बचने का पहला और सबसे आसान तरीका मोबाइल ब्राउज़र को "बताना" है कि आपके पेज को ज़ूम करने की ज़रूरत नहीं है - जो एक तय व्यूपोर्ट का इस्तेमाल करके किया जा सकता है, जैसे अपने पेज में शामिल करके:

<meta name="viewport" content="width=device-width,user-scalable=no">

यह हमेशा उचित नहीं होता - इससे, पिंच-ज़ूम करने की सुविधा बंद हो जाती है, जो सुलभता की वजहों के लिए ज़रूरी हो सकती है. इसलिए, अगर आपको उपयोगकर्ता स्केलिंग की सुविधा बंद करनी हो, तो इसका इस्तेमाल कभी-कभी ही करें. ऐसा करने पर, ऐप्लिकेशन में टेक्स्ट को आसानी से पढ़ा जा सकेगा. इसके अलावा, टच की सुविधा वाले डेस्कटॉप क्लास डिवाइसों पर Chrome और मोबाइल प्लैटफ़ॉर्म पर दूसरे ब्राउज़र के लिए, यह देरी लागू नहीं होती. ऐसा तब होता है, जब पेज में ऐसे व्यूपोर्ट होते हैं जिन्हें स्केल नहीं किया जा सकता.

#2: Mousemove इवेंट को छूकर, ट्रिगर नहीं किया जाना

इस बात का ध्यान रखना ज़रूरी है कि टच इंटरफ़ेस में माउस इवेंट को एमुलेट करने से, आम तौर पर mousemove इवेंट को एमुलेट नहीं किया जा सकता. इसलिए, अगर आपने mousemove इवेंट का इस्तेमाल करने वाला कोई अच्छा माउस-ड्रिवन कंट्रोल बनाया है, तो हो सकता है कि वह टच डिवाइस पर काम न करे. ऐसा तब तक होगा, जब तक आपने खास तौर पर touchmove हैंडलर भी नहीं जोड़े.

ब्राउज़र आम तौर पर, एचटीएमएल कंट्रोल पर टच इंटरैक्शन के लिए सही इंटरैक्शन अपने-आप लागू कर देते हैं. इसलिए, उदाहरण के लिए, HTML5 रेंज कंट्रोल तब ही काम करेंगे, जब टच इंटरैक्शन का इस्तेमाल किया जाएगा. हालांकि, अगर आपने अपने कंट्रोल लागू किए हैं, तो हो सकता है कि वे क्लिक करके खींचने और छोड़ने वाले इंटरैक्शन पर काम न करें. असल में, आम तौर पर इस्तेमाल की जाने वाली कुछ लाइब्रेरी (जैसे, jQueryUI) अब तक इस तरह से टच इंटरैक्शन के साथ काम नहीं करती हैं. हालांकि, jQueryUI के लिए, इस समस्या को ठीक करने के कई तरीके हैं. टच के साथ काम करने के लिए, अपने Web Audio Playground ऐप्लिकेशन को अपग्रेड करते समय मुझे सबसे पहले यह समस्या मिली थी - स्लाइडर jQueryUI पर आधारित थे, इसलिए वे क्लिक करके खींचने और छोड़ने वाले इंटरैक्शन के साथ काम नहीं करते थे. मैंने HTML5 रेंज कंट्रोल पर स्विच किया और वे काम करने लगे. इसके अलावा, मुझे स्लाइडर को अपडेट करने के लिए टचमूव हैंडलर भी जोड़ना पड़ सकता है, लेकिन इसमें एक समस्या है...

#3: Touchmove और MouseMove एक ही चीज़ नहीं हैं

मैंने कुछ डेवलपर को एक गड़बड़ी करते हुए देखा है. वे touchmove और mousemove हैंडलर को एक ही कोडपाथ में कॉल करते हैं. इन इवेंट का व्यवहार काफ़ी मिलता-जुलता है, लेकिन इनमें थोड़ा अंतर है. खास तौर पर, टच इवेंट हमेशा उस एलिमेंट को टारगेट करते हैं जहां टच शुरू हुआ था, जबकि माउस इवेंट उस एलिमेंट को टारगेट करते हैं जो फ़िलहाल माउस कर्सर के नीचे है. यही वजह है कि हमारे पास माउसओवर और माउसआउट इवेंट हैं, लेकिन उनके लिए कोई टचओवर और टचआउट इवेंट नहीं है - सिर्फ़ टचएंड.

इससे आपको नुकसान होने का सबसे सामान्य तरीका यह है कि अगर आप उस एलीमेंट को हटा (या उसका स्थान बदल देते हैं) जिसे उपयोगकर्ता ने छूना शुरू कर दिया था. उदाहरण के लिए, इमेज कैरसेल के साथ टच हैंडलर का इस्तेमाल करके, कैरसेल को पसंद के मुताबिक स्क्रोल किया जा सकता है. इमेज में बदलाव होने पर, कुछ <img> एलिमेंट हटाए जाते हैं और दूसरे एलिमेंट जोड़े जाते हैं. अगर उपयोगकर्ता उनमें से किसी एक इमेज को छूता है और फिर आप उसे हटा देते हैं, तो आपके हैंडलर (जो img एलिमेंट के ऐन्सेस्टर पर है) को सिर्फ़ टच इवेंट मिलना बंद हो जाएंगे (क्योंकि उन्हें ऐसे टारगेट पर भेजा जा रहा है जो अब पेड़ पर नहीं है) - ऐसा दिखेगा कि उपयोगकर्ता ने अपनी उंगली एक जगह से पकड़ रखी हो, भले ही वह कहीं खिसक गया हो और फिर उसे हटा दिया गया हो.

हालांकि, टच चालू होने पर उन एलिमेंट को हटाने से इस समस्या से बचा जा सकता है जिनमें टच हैंडलर हैं या जिनके पैरंट एलिमेंट में टच हैंडलर हैं. वैकल्पिक रूप से, स्थैतिक टचएंड/टचमूव हैंडलर को रजिस्टर करने के बजाय, सबसे अच्छा दिशा-निर्देश तब तक इंतज़ार करें, जब तक आपको कोई टचस्टार्ट इवेंट नहीं मिल जाता. इसके बाद टचस्टार्ट इवेंट के टारगेट में Touchmove/Touchend/Touchcancel हैंडलर जोड़ें (और उन्हें end/cancel पर हटाएं). इस तरह, टारगेट एलिमेंट को दूसरी जगह ले जाने या हटाने के बाद भी, आपको टच के लिए इवेंट मिलते रहेंगे. यहां इसकी मदद से थोड़ा एक्सपेरिमेंट किया जा सकता है - लाल बॉक्स को छुएं और उसे डीओएम से हटाने के लिए, एस्केप बटन को दबाकर रखें.

#4: टच और होवर करना

माउस पॉइंटर के मेटाफ़ोर ने कर्सर की पोज़िशन को, चुनने की प्रोसेस से अलग कर दिया. इससे डेवलपर, कर्सर को घुमाने पर दिखने वाली स्थितियों का इस्तेमाल करके, उपयोगकर्ताओं के लिए काम की जानकारी छिपाने और दिखाने में सक्षम हुए. हालांकि, फ़िलहाल ज़्यादातर टच इंटरफ़ेस, किसी टारगेट पर उंगली "होवर" करने का पता नहीं लगाते.इसलिए, होवर करने के आधार पर, खास जानकारी (जैसे, "यह कंट्रोल क्या है?" पॉप-अप) देना सही नहीं है. ऐसा तब तक नहीं किया जाना चाहिए, जब तक इस जानकारी को ऐक्सेस करने का टच-फ़्रेंडली तरीका भी न दिया जाए. आपको इस बात का ध्यान रखना होगा कि उपयोगकर्ताओं को जानकारी देने के लिए, कर्सर घुमाने की सुविधा का इस्तेमाल कैसे किया जाए.

हालांकि, दिलचस्प बात यह है कि कुछ मामलों में टच इंटरफ़ेस से सीएसएस :hover स्यूडोक्लास को ट्रिगर किया जा सकता है - किसी एलिमेंट पर टैप करने से, उंगली के नीचे होने पर उसे :active बना दिया जाता है. साथ ही, उसे :hover स्टेटस भी मिल जाता है. (Internet Explorer में, :hover सिर्फ़ तब लागू होता है, जब उपयोगकर्ता का फ़िंगर नीचे होता है - अन्य ब्राउज़र, अगले टैप या माउस मूव होने तक :hover को लागू रखते हैं.) टच इंटरफ़ेस पर पॉप-आउट मेन्यू को काम करने के लिए, यह एक अच्छा तरीका है. किसी एलिमेंट को चालू करने का एक साइड इफ़ेक्ट यह भी है कि :hover स्टेटस भी लागू हो जाता है. उदाहरण के लिए:

<style>
img ~ .content {
  display:none;
}

img:hover ~ .content {
  display:block;
}
</style>

<img src="/awesome.png">
<div class="content">This is an awesome picture of me</div>

किसी दूसरे एलिमेंट पर टैप करने के बाद, वह एलिमेंट चालू नहीं रहता और कर्सर घुमाने की स्थिति हट जाती है. ऐसा तब होता है, जब उपयोगकर्ता माउस पॉइंटर का इस्तेमाल करके, उसे एलिमेंट से हटा देता है. कॉन्टेंट को <a> एलिमेंट में रैप करके, उसे टैबस्टॉप भी बनाया जा सकता है. इससे उपयोगकर्ता, माउस घुमाकर या क्लिक करके, टच टैप या की दबाकर अतिरिक्त जानकारी को टॉगल कर सकता है. इसके लिए, JavaScript की ज़रूरत नहीं होती. जब मैंने टच इंटरफ़ेस के साथ ठीक से काम करने के लिए अपने वेब ऑडियो प्लेग्राउंड को बनाने का काम शुरू किया, तो मुझे खुशी हुई, क्योंकि मेरे पॉप-आउट मेन्यू टच पर पहले से ही अच्छा काम करते थे, क्योंकि मैं इस तरह की संरचना का इस्तेमाल करता था!

ऊपर दिया गया तरीका, माउस पॉइंटर पर आधारित इंटरफ़ेस के साथ-साथ टच इंटरफ़ेस के लिए भी अच्छा काम करता है. यह कर्सर घुमाने पर, "टाइटल" एट्रिब्यूट का इस्तेमाल करने से अलग है. एलिमेंट चालू होने पर ये एट्रिब्यूट नहीं दिखते:

<img src="/awesome.png" title="this doesn't show up in touch">

#5: टच और माउस, दोनों में से किसका सटीक कंट्रोल बेहतर है

माउस की सटीक जानकारी नहीं होती, लेकिन यह पता चला है कि वे काफ़ी सटीक होते हैं. ऐसा इसलिए होता है, क्योंकि ऑपरेटिंग सिस्टम आम तौर पर कर्सर के लिए पिक्सल की सटीक जानकारी ट्रैक करता है. दूसरी ओर, मोबाइल डेवलपर को पता चला है कि टच स्क्रीन पर उंगली से किए जाने वाले टच उतने सटीक नहीं होते. ऐसा इसलिए होता है, क्योंकि स्क्रीन से संपर्क करते समय उंगली के सतह के हिस्से का साइज़ बड़ा होता है. साथ ही, आपकी उंगलियां स्क्रीन को रोकती हैं.

कई लोगों और कंपनियों ने उपयोगकर्ताओं पर ज़्यादा से ज़्यादा रिसर्च की है. इससे उन्हें यह पता चला है कि उंगलियों से इंटरैक्ट करने की सुविधा देने वाले ऐप्लिकेशन और साइटों को कैसे डिज़ाइन किया जाए. इस विषय पर कई किताबें भी लिखी गई हैं. हमारा सुझाव है कि पैडिंग बढ़ाकर, टच टारगेट का साइज़ बढ़ाएं. साथ ही, एलिमेंट के बीच मार्जिन बढ़ाकर, गलत टैप की संभावना कम करें. (टच और क्लिक इवेंट की हिट डिटेक्शन हैंडलिंग में मार्जिन शामिल नहीं किए जाते, जबकि पैडिंग को शामिल नहीं किया जाता है.) वेब ऑडियो प्लेलैंड में, मुझे कनेक्शन पॉइंट के साइज़ को बढ़ाना पड़ा, ताकि उन्हें आसानी से और सटीक तरीके से छुआ जा सके.

टच-आधारित इंटरफ़ेस को मैनेज करने वाले कई ब्राउज़र वेंडर ने ब्राउज़र में लॉजिक भी जोड़ा है. इससे, उपयोगकर्ता के स्क्रीन को छूने पर सही एलिमेंट को टारगेट करने और गलत क्लिक की संभावना को कम करने में मदद मिलती है. हालांकि, आम तौर पर यह सिर्फ़ क्लिक इवेंट को ठीक करता है, न कि मूव इवेंट को. हालांकि, ऐसा लगता है कि Internet Explorer, mousedown/mousemove/mouseup इवेंट में भी बदलाव करता है.

#6: टच हैंडल को सीमित रखें, नहीं तो वे आपके स्क्रोल को खराब कर देंगे

यह भी ज़रूरी है कि टच हैंडलर सिर्फ़ उन एलिमेंट तक सीमित हों जहां उनकी ज़रूरत है. टच एलिमेंट का बैंडविड्थ बहुत ज़्यादा हो सकता है. इसलिए, स्क्रोलिंग एलिमेंट पर टच हैंडलर का इस्तेमाल करने से बचना चाहिए. ऐसा इसलिए, क्योंकि आपकी प्रोसेसिंग, तेज़ी से और बिना रुकावट के टच स्क्रोलिंग के लिए ब्राउज़र के ऑप्टिमाइज़ेशन में रुकावट डाल सकती है. आधुनिक ब्राउज़र, GPU थ्रेड पर स्क्रोल करने की कोशिश करते हैं. हालांकि, अगर उन्हें पहले यह देखना पड़ता है कि हर टच इवेंट को ऐप्लिकेशन मैनेज करेगा या नहीं, तो ऐसा करना मुमकिन नहीं है. इस व्यवहार का उदाहरण देखें.

इस समस्या से बचने के लिए दिशा-निर्देश का पालन करने के लिए, यह पक्का करें कि अगर यूज़र इंटरफ़ेस (यूआई) के छोटे से हिस्से में ही टच इवेंट हैंडल किए जा रहे हों, तो टच हैंडलर अटैच करें.उदाहरण के लिए, पेज के <body> पर सिर्फ़ टच हैंडलर अटैच करें. कम शब्दों में कहें, तो अपने टच हैंडलर के दायरे को जितना हो सके उतना सीमित रखें.

#7: मल्टी-टच

आखिरी दिलचस्प चुनौती यह है कि हम इसे "टच" यूज़र इंटरफ़ेस के तौर पर बता रहे हैं. हालांकि, असल में यह मल्टी-टच के लिए है. इसका मतलब है कि एपीआई एक बार में एक से ज़्यादा टच इनपुट देते हैं. अपने ऐप्लिकेशन में टच की सुविधा जोड़ते समय, आपको यह ध्यान रखना चाहिए कि एक से ज़्यादा टच से आपके ऐप्लिकेशन पर क्या असर पड़ सकता है.

अगर आपको मुख्य रूप से माउस से चलने वाले ऐप्लिकेशन बनाने हैं, तो आपको ज़्यादा से ज़्यादा एक कर्सर पॉइंट का इस्तेमाल करके ऐप्लिकेशन बनाने की आदत है. सिस्टम आम तौर पर, एक से ज़्यादा माउस कर्सर के साथ काम नहीं करता है. कई ऐप्लिकेशन के लिए, आपको सिर्फ़ टच इवेंट को एक कर्सर इंटरफ़ेस पर मैप करना होगा. हालांकि, डेस्कटॉप टच इनपुट के लिए, हमने देखा है कि ज़्यादातर हार्डवेयर एक साथ कम से कम दो इनपुट को हैंडल कर सकते हैं. साथ ही, ऐसा लगता है कि ज़्यादातर नए हार्डवेयर एक साथ कम से कम पांच इनपुट के साथ काम कर सकते हैं. ऑन-स्क्रीन पियानो कीबोर्ड बनाने के लिए, आपको एक साथ कई टच इनपुट की सुविधा देनी होगी.

हाल ही में लागू किए गए W3C Touch API के पास, यह पता लगाने के लिए कोई एपीआई नहीं है कि हार्डवेयर कितने टच पॉइंट पर काम करता है. इसलिए, आपको यह अनुमान लगाना होगा कि आपके उपयोगकर्ता कितने टच पॉइंट पाना चाहते हैं - या, इस बात पर ध्यान दें कि आपको कितने टच पॉइंट दिखते हैं. उदाहरण के लिए, अगर आपको पियानो ऐप्लिकेशन में दो से ज़्यादा टच पॉइंट कभी नहीं दिखते हैं, तो हो सकता है कि आप कुछ "कोर्ड" यूज़र इंटरफ़ेस जोड़ना चाहें. PointerEvents API में, डिवाइस की क्षमताओं का पता लगाने के लिए एपीआई होता है.

वीडियो को बेहतर बनाना

उम्मीद है कि इस लेख से आपको माउस इंटरैक्शन के साथ-साथ टच इंटरैक्शन को लागू करने में आने वाली आम समस्याओं के बारे में कुछ जानकारी मिली होगी. निश्चित रूप से, किसी भी दूसरी सलाह से ज़्यादा ज़रूरी यह है कि आपको मोबाइल, टैबलेट, और माउस-और-टच दोनों वाले डेस्कटॉप एनवायरमेंट पर अपने ऐप्लिकेशन की जांच करनी चाहिए. अगर आपके पास टच+माउस हार्डवेयर नहीं है, तो अलग-अलग स्थितियों की जांच करने के लिए, Chrome के "टच इवेंट को बेहतर बनाएं" का इस्तेमाल करें.

इन दिशा-निर्देशों का पालन करके, टच इनपुट, माउस इनपुट, और दोनों तरह के इंटरैक्शन के साथ अच्छी तरह काम करने वाले दिलचस्प इंटरैक्टिव अनुभव बनाए जा सकते हैं.