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

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

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

हमारे पास टच इवेंट हैं में मदद करते हैं, लेकिन वे पूरी तरह से एक अलग एपीआई हैं. विशेष रूप से टच के लिए, जिससे आपको दो अलग-अलग इवेंट मॉडल कोड करने के लिए मजबूर किया जा सकता है, माउस और टच दोनों का समर्थन करना चाहते हैं. Chrome 55 के लिए नए स्टैंडर्ड का इस्तेमाल किया जा रहा है जो दोनों मॉडल को एक साथ रखता है: पॉइंटर इवेंट.

सिंगल इवेंट मॉडल

पॉइंटर इवेंट, टच, पेन, और माउस को एक साथ लाने वाले ब्राउज़र के लिए पॉइंटर इनपुट मॉडल में बदल दिया जाता है. उदाहरण के लिए:

document.addEventListener('pointermove',
    ev => console.log('The pointer moved.'));
foo.addEventListener('pointerover',
    ev => console.log('The pointer is now over foo.'));

यहां सभी उपलब्ध इवेंट की सूची दी गई है. अगर अगर आपको माउस इवेंट के बारे में पता है, तो:

इनपुट के अलग-अलग टाइप

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

पॉइंटर कैप्‍चर

काम न करने वाले 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 पर अप-टू-डेट सूची ढूंढें.

Pointer इवेंट पॉलीफ़िल का इस्तेमाल इन कामों के लिए किया जा सकता है कम करने में मदद करता है. इसके अलावा, रनटाइम के दौरान ब्राउज़र पर यह जांच की जा सकती है कि सहायता उपलब्ध है या नहीं आसान:

if (window.PointerEvent) {
    // Yay, we can use pointer events!
} else {
    // Back to mouse and touch events, I guess.
}

पॉइंटर इवेंट से, कॉन्टेंट को बेहतर बनाने में काफ़ी मदद मिलती है: सिर्फ़ ऊपर दी गई जांच के लिए, शुरू करने के तरीकों में बदलाव करें. इसके अलावा, पॉइंटर इवेंट जोड़ें हैंडलर को if ब्लॉक में मैनेज कर सकते हैं और अपने माउस/टच इवेंट हैंडलर को else ब्लॉक.

तो आगे बढ़ें, उन्हें एक बार आज़माएं और हमें बताएं कि आपका इस बारे में क्या ख्याल है!