दर्शकों को जोड़े रखने के लिए,

Sérgio Gomes

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

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

इस काम में हमारी मदद करने के लिए, हमारे पास कुछ समय के लिए टच इवेंट थे. हालांकि, वे खास तौर पर टच के लिए पूरी तरह से अलग एपीआई हैं. अगर आपको माउस और टच, दोनों की सुविधा देनी है, तो आपको दो अलग-अलग इवेंट मॉडल को कोड करने के लिए मजबूर होना होगा. 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	कैप्चर किया जा रहा पॉइंटर रिलीज़ कर दिया गया है.

ध्यान दें: पॉइंटर इवेंट, pointer-events CSS property से भ्रम की स्थिति पैदा करते हैं. इससे भी बुरी बात यह है कि दोनों को एक साथ इस्तेमाल किया जा सकता है! पॉइंटर इवेंट (इवेंट मॉडल) के साथ pointer-events (सीएसएस प्रॉपर्टी) का व्यवहार, माउस इवेंट या टच इवेंट के साथ होने वाले व्यवहार से अलग नहीं होता. इसलिए, अगर आपने पहले उस सीएसएस प्रॉपर्टी का इस्तेमाल किया है, तो आपको पता है कि आगे क्या होगा.

अलग-अलग तरह के इनपुट

आम तौर पर, पॉइंटर इवेंट की मदद से कोड को इनपुट-एग्नोस्टिक तरीके से लिखा जा सकता है. इसके लिए, अलग-अलग इनपुट डिवाइसों के लिए अलग-अलग इवेंट हैंडलर रजिस्टर करने की ज़रूरत नहीं होती. बेशक, आपको अब भी इनपुट प्रकारों के बीच के अंतर को ध्यान में रखना होगा, जैसे कि कर्सर घुमाने का सिद्धांत लागू होता है या नहीं. अगर आपको अलग-अलग इनपुट डिवाइस टाइप को अलग-अलग दिखाना है, जैसे कि अलग-अलग इनपुट के लिए अलग कोड/फ़ंक्शन देना, तो 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 ब्लॉक में ले जाएं.

चलिए, उन्हें एक बार फिर से बताएं और हमें अपने अनुभव के बारे में बताएं!