वेब पर मौजूद चीज़ों की ओर इशारा करना पहले आसान हुआ करता था. आपके पास माउस होता था, आप उसे चारों ओर घुमाते थे, कभी-कभी आप बटन पुश करते थे और बस इतना ही. जो भी माउस नहीं था उसे उसकी नकल करके बनाया गया था और डेवलपर को अच्छी तरह पता था कि किस पर भरोसा करना है.
हालांकि, सामान्य का मतलब ज़रूरी नहीं है कि अच्छा भी है. समय के साथ, यह बात बढ़ने लगी कि हर चीज़ चूहों की तरह नहीं होती (या ऐसा दिखावा किया जाता था कि सब कुछ चूहों की तरह नहीं होता): आप शानदार क्रिएटिव आज़ादी के लिए प्रेशर-सेंसिटिव और टिल्ट-अवेयर पेन इस्तेमाल कर सकते थे अब अपनी उंगलियों का इस्तेमाल कर सकते थे इसलिए, सिर्फ़ डिवाइस और हाथ का होना चाहिए, और हैलो, क्यों न एक उंगली से ज़्यादा इस्तेमाल किया जाए?
इस काम में हमारी मदद करने के लिए, हमारे पास कुछ समय के लिए टच इवेंट थे. हालांकि, वे खास तौर पर टच के लिए पूरी तरह से अलग एपीआई हैं. अगर आपको माउस और टच, दोनों की सुविधा देनी है, तो आपको दो अलग-अलग इवेंट मॉडल को कोड करने के लिए मजबूर होना होगा. Chrome 55 एक नए स्टैंडर्ड के साथ आता है, जो दोनों मॉडल को एक साथ दिखाता है: पॉइंटर इवेंट.
सिंगल इवेंट मॉडल
पॉइंटर इवेंट, ब्राउज़र के लिए पॉइंटर इनपुट मॉडल को इंटिग्रेट करता है. इससे टच, पेन, और माउस को एक साथ इवेंट के एक सेट में लाया जा सकता है. उदाहरण के लिए:
document.addEventListener('pointermove',
ev => console.log('The pointer moved.'));
foo.addEventListener('pointerover',
ev => console.log('The pointer is now over foo.'));
यहां सभी उपलब्ध इवेंट की सूची दी गई है, अगर आप माउस इवेंट के बारे में कुछ जानते हैं, तो वे काफ़ी जानी-पहचानी दिखेंगी:
pointerover
|
पॉइंटर ने एलिमेंट के बाउंडिंग बॉक्स में प्रवेश कर लिया है.
यह कार्रवाई, उन डिवाइसों पर तुरंत होती है जिन पर कर्सर घुमाने की सुविधा काम करती है. इसके अलावा, जिन डिवाइसों पर यह सुविधा काम नहीं करती उनमें
pointerdown इवेंट से पहले ऐसा होता है.
|
pointerenter
|
यह pointerover की तरह है, लेकिन यह डिसेंडेंट को अलग तरीके से बबल और हैंडल नहीं करता.
खास जानकारी के बारे में ज़्यादा जानकारी.
|
pointerdown
|
पॉइंटर ने इनपुट डिवाइस के सिमेंटिक्स के आधार पर, या तो बटन को दबाकर या संपर्क की जानकारी जोड़े जाने के दौरान, बटन की स्थिति ऐक्टिव कर दी है. |
pointermove
|
पॉइंटर की जगह बदल गई है. |
pointerup
|
पॉइंटर ने चालू बटन की स्थिति को छोड़ दिया है. |
pointercancel
|
कुछ ऐसा हुआ है जिसका मतलब है कि शायद पॉइंटर से कोई और इवेंट नहीं निकलेगा. इसका मतलब है कि आपको पहले की जा रही सभी कार्रवाइयों को रद्द करना होगा और न्यूट्रल इनपुट स्थिति में वापस जाना होगा. |
pointerout
|
पॉइंटर ने एलिमेंट या स्क्रीन की बाउंडिंग बॉक्स को छोड़ दिया है. अगर pointerup के बाद भी डिवाइस पर कर्सर घुमाने की सुविधा काम नहीं करती है, तो.
|
pointerleave
|
यह pointerout की तरह है, लेकिन यह डिसेंडेंट को अलग तरीके से बबल और हैंडल नहीं करता.
खास जानकारी के बारे में ज़्यादा जानकारी.
|
gotpointercapture
|
एलिमेंट को पॉइंटर कैप्चर मिला. |
lostpointercapture
|
कैप्चर किया जा रहा पॉइंटर रिलीज़ कर दिया गया है. |
अलग-अलग तरह के इनपुट
आम तौर पर, पॉइंटर इवेंट की मदद से कोड को इनपुट-एग्नोस्टिक तरीके से लिखा जा सकता है.
इसके लिए, अलग-अलग इनपुट डिवाइसों के लिए अलग-अलग इवेंट हैंडलर रजिस्टर करने की ज़रूरत नहीं होती.
बेशक, आपको अब भी इनपुट प्रकारों के बीच के अंतर को ध्यान में रखना होगा, जैसे कि कर्सर घुमाने का सिद्धांत लागू होता है या नहीं. अगर आपको अलग-अलग इनपुट डिवाइस टाइप को अलग-अलग दिखाना है, जैसे कि अलग-अलग इनपुट के लिए अलग कोड/फ़ंक्शन देना, तो PointerEvent
इंटरफ़ेस की pointerType
प्रॉपर्टी का इस्तेमाल करके, उसी इवेंट हैंडलर से ऐसा किया जा सकता है. उदाहरण के लिए, साइड नेविगेशन पैनल को कोड में बदलने पर, आपके pointermove
इवेंट में यह लॉजिक हो सकता है:
switch(ev.pointerType) {
case 'mouse':
// Do nothing.
break;
case 'touch':
// Allow drag gesture.
break;
case 'pen':
// Also allow drag gesture.
break;
default:
// Getting an empty string means the browser doesn't know
// what device type it is. Let's assume mouse and do nothing.
break;
}
डिफ़ॉल्ट कार्रवाइयां
टच-आधारित ब्राउज़र में, पेज को स्क्रोल करने, ज़ूम करने या रीफ़्रेश करने के लिए हाथ के कुछ जेस्चर इस्तेमाल किए जाते हैं.
टच इवेंट के मामले में, इन डिफ़ॉल्ट कार्रवाइयों के होने पर भी आपको इवेंट मिलेंगे – उदाहरण के लिए, उपयोगकर्ता के स्क्रोल करने के दौरान touchmove
ट्रिगर होगा.
पॉइंटर इवेंट की मदद से, स्क्रोल या ज़ूम करने जैसी कोई डिफ़ॉल्ट कार्रवाई ट्रिगर होने पर आपको pointercancel
इवेंट दिखेगा. इससे आपको पता चलेगा कि ब्राउज़र ने पॉइंटर को कंट्रोल कर लिया है. उदाहरण के लिए:
document.addEventListener('pointercancel',
ev => console.log('Go home, the browser is in charge now.'));
पहले से मौजूद स्पीड: टच इवेंट के मुकाबले, इस मॉडल में डिफ़ॉल्ट रूप से बेहतर परफ़ॉर्मेंस मिलती है. इसके लिए, आपको पैसिव इवेंट लिसनर का इस्तेमाल करना होगा. इससे, आपको एक जैसा रिस्पॉन्स मिलेगा.
आपके पास, ब्राउज़र को
touch-action
सीएसएस प्रॉपर्टी का कंट्रोल देने से रोकने का विकल्प है. इसे किसी एलिमेंट पर none
पर सेट करने से, उस एलिमेंट पर ब्राउज़र से तय की गई सभी कार्रवाइयां बंद हो जाएंगी. हालांकि, बेहतर कंट्रोल के लिए कई अन्य वैल्यू भी होती हैं, जैसे कि pan-x
. इससे ब्राउज़र को x ऐक्सिस पर होने वाली गतिविधि के हिसाब से प्रतिक्रिया देने की अनुमति मिलती है, लेकिन y ऐक्सिस पर नहीं. Chrome 55
इन वैल्यू के साथ काम करता है:
auto
|
डिफ़ॉल्ट; ब्राउज़र कोई भी डिफ़ॉल्ट कार्रवाई कर सकता है. |
none
|
ब्राउज़र को कोई भी डिफ़ॉल्ट कार्रवाई करने की अनुमति नहीं है. |
pan-x
|
ब्राउज़र को सिर्फ़ हॉरिज़ॉन्टल स्क्रोल डिफ़ॉल्ट कार्रवाई करने की अनुमति है. |
pan-y
|
ब्राउज़र को सिर्फ़ वर्टिकल स्क्रोल डिफ़ॉल्ट कार्रवाई करने की अनुमति है. |
pan-left
|
ब्राउज़र को सिर्फ़ हॉरिज़ॉन्टल स्क्रोल डिफ़ॉल्ट कार्रवाई करने और पेज को सिर्फ़ बाईं ओर पैन करने की अनुमति है. |
pan-right
|
ब्राउज़र को सिर्फ़ हॉरिज़ॉन्टल स्क्रोल डिफ़ॉल्ट कार्रवाई करने की अनुमति है और वह पेज को सिर्फ़ दाईं ओर पैन कर सकता है. |
pan-up
|
ब्राउज़र को सिर्फ़ वर्टिकल स्क्रोल के लिए डिफ़ॉल्ट कार्रवाई करने की अनुमति है. इससे सिर्फ़ पेज को ऊपर की ओर पैन किया जा सकता है. |
pan-down
|
ब्राउज़र को सिर्फ़ वर्टिकल स्क्रोल के लिए डिफ़ॉल्ट रूप से लागू होने वाली कार्रवाई करने की अनुमति है. इससे सिर्फ़ पेज को नीचे की ओर पैन किया जा सकता है. |
manipulation
|
ब्राउज़र को सिर्फ़ स्क्रोल और ज़ूम करने की कार्रवाइयां करने की अनुमति है. |
पॉइंटर कैप्चर
क्या आपने कभी किसी काम न करने वाले mouseup
इवेंट को डीबग करने में इतना खराब समय बिताया है कि आपको यह पता न चले कि ऐसा इसलिए है, क्योंकि उपयोगकर्ता आपके क्लिक टारगेट से बाहर बटन ही छोड़ रहा है? नहीं? ठीक है, तो हो सकता है कि वह मैं ही हूं.
फिर भी, अभी तक इस समस्या को हल करने का कोई अच्छा तरीका नहीं था. बिलकुल,
आप दस्तावेज़ पर mouseup
हैंडलर सेट अप कर सकते हैं और चीज़ों को ट्रैक करने के लिए
अपने ऐप्लिकेशन पर कुछ स्थिति सेव कर सकते हैं. हालांकि, यह सबसे बेहतर समाधान नहीं है. खास तौर पर, जब वेब कॉम्पोनेंट बनाया जा रहा हो और हर चीज़ को अच्छा और अलग-अलग रखने की कोशिश की जा रही हो.
पॉइंटर इवेंट से, यह एक बेहतर समाधान हो सकता है: पॉइंटर को कैप्चर किया जा सकता है, ताकि आपको वह pointerup
इवेंट (या कोई दूसरा दोस्त) पक्के तौर पर मिल जाए.
const foo = document.querySelector('#foo');
foo.addEventListener('pointerdown', ev => {
console.log('Button down, capturing!');
// Every pointer has an ID, which you can read from the event.
foo.setPointerCapture(ev.pointerId);
});
foo.addEventListener('pointerup',
ev => console.log('Button up. Every time!'));
ब्राउज़र समर्थन
लिखने के समय, पॉइंटर इवेंट को Internet Explorer 11, Microsoft Edge, Chrome, और Opera में और कुछ हद तक Firefox में इस्तेमाल किया जा सकता है. caniuse.com पर जाकर अप-टू-डेट सूची देखें.
पॉइंटर इवेंट पॉलीफ़िल का इस्तेमाल करके, गैप को पूरा किया जा सकता है. इसके अलावा, रनटाइम के दौरान ब्राउज़र सहायता की जांच करना भी आसान है:
if (window.PointerEvent) {
// Yay, we can use pointer events!
} else {
// Back to mouse and touch events, I guess.
}
प्रोग्रेसिव एन्हैंसमेंट के लिए, पॉइंटर इवेंट बेहद ज़रूरी हैं: ऊपर दी गई जांच करने के लिए, शुरू करने के तरीकों में बदलाव करें, if
ब्लॉक में पॉइंटर इवेंट हैंडलर जोड़ें, और अपने माउस/टच इवेंट हैंडलर को else
ब्लॉक में ले जाएं.
चलिए, उन्हें एक बार फिर से बताएं और हमें अपने अनुभव के बारे में बताएं!