कर्सर और पॉइंटर

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

कर्सर

ब्राउज़र, कर्सर के इस्तेमाल के कुछ सामान्य उदाहरणों को अपने-आप हैंडल करते हैं.

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

ज़्यादा इंटरैक्टिव साइटें बनाने के दौरान, आपको कर्सर को पसंद के मुताबिक बनाना होगा, ताकि उपयोगकर्ता इंटरैक्शन को आसानी से समझ सकें.

ब्राउज़र, कर्सर प्रॉपर्टी के लिए कई कीवर्ड इस्तेमाल करते हैं. इनसे ड्रैग करने, साइज़ बदलने, चुनने वगैरह के बारे में जानकारी मिलती है.

अगर कर्सर के लिए उपलब्ध विकल्पों में से कोई भी विकल्प, एलिमेंट के इंटरैक्शन के बारे में नहीं बताता है, तो कर्सर के तौर पर इस्तेमाल करने के लिए, SVG या PNG इमेज भी दी जा सकती है.

कैरेट

इंसर्शन कैरेट का इस्तेमाल, बदलाव किए जा सकने वाले टेक्स्ट में आपकी जगह दिखाने के लिए किया जाता है. यह आपके कर्सर से अलग होता है, क्योंकि यह आपके माउस को फ़ॉलो नहीं करता. caret-color की मदद से, रंग बदला जा सकता है.

उपयोगकर्ता के पॉइंटर इनपुट का जवाब देना

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

आम तौर पर, ये समस्याएं देखने को मिलती हैं: बटन बहुत छोटे हैं या इंटरैक्टिव एलिमेंट एक-दूसरे के बहुत करीब हैं. इनकी वजह से, उपयोगकर्ताओं को सही एलिमेंट के साथ इंटरैक्ट करने में मुश्किल होती है.

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

pointer मीडिया सुविधा का मतलब है कि उपयोगकर्ता का मुख्य इनपुट डिवाइस, जबकि any-pointer का मतलब है कि सभी इनपुट डिवाइस. माउस जैसे डिवाइसों को fine और टचस्क्रीन जैसे डिवाइसों को coarse के साथ मैच किया जा सकता है. none वैल्यू से पता चलता है कि उपयोगकर्ता, पॉइंटर वाले इनपुट डिवाइस का इस्तेमाल नहीं कर रहा है.

पॉइंटर और टच इवेंट

टचस्क्रीन के कुछ जेस्चर बंद करना

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

अगर आपको ब्राउज़र को कुछ कार्रवाइयां करने से रोकना है, तो उन कार्रवाइयों की सूची बनाएं जिन्हें आपको एलिमेंट से हैंडल करवाना है. pan-x और pan-y, एक उंगली से पैन करने के जेस्चर (हाव-भाव) की सुविधा चालू करते हैं. इन्हें pinch-zoom के साथ चालू किया जा सकता है. इससे एक से ज़्यादा उंगलियों से ज़ूम इन/आउट करने और पैन करने की सुविधा मिलती है.

manipulation कीवर्ड, pan-x pan-y pinch-zoom के बराबर होता है. manipulation में, टच से जुड़ी अन्य गतिविधियों को शामिल नहीं किया जाता. जैसे, ज़ूम करने के लिए दो बार टैप करना. इसके लिए, कम समय में कई बार टच करने की ज़रूरत होती है.

touch-action से किसी कार्रवाई को बाहर रखकर, ब्राउज़र को उस कार्रवाई को हैंडल करने से रोका जा सकता है. इसके बाद, उस कार्रवाई के लिए पॉइंटर इवेंट सेट अप किए जा सकते हैं.

सभी इवेंट और कार्रवाइयां बंद करना

कुछ मामलों में, आपको यह बताना पड़ सकता है कि कोई एलिमेंट इंटरैक्टिव नहीं है. उदाहरण के लिए, किसी बटन पर pointer-events: none सेट करने पर, उस बटन पर क्लिक नहीं किया जा सकेगा. साथ ही, उस पर कर्सर घुमाने पर भी कोई कार्रवाई नहीं होगी.

देखें कि आपको कितना समझ आया

टचस्क्रीन पर जेस्चर के लिए, पॉइंटर इवेंट को कौनसी प्रॉपर्टी कंट्रोल करती है?

pointer-events
गलत.
manipulation
गलत.
interactivity
गलत.
touch-action
सही!

अगर किसी उपयोगकर्ता के पास टचस्क्रीन वाला ऐसा डिवाइस है जिसमें माउस को सेकंडरी इनपुट के तौर पर कनेक्ट किया गया है, तो कौनसी मीडिया क्वेरी मैच होंगी?

@media (pointer: coarse)
सही!
@media (pointer: fine)
गलत.
@media (any-pointer: coarse)
सही!
@media (any-pointer: fine)
सही!