जावास्क्रिप्ट में पॉइंटर इवेंट का उपयोग कैसे करें

चाबी छीनना

• व्यापक दर्शकों की जरूरतों को पूरा करने के लिए वेब एप्लिकेशन को केवल माउस ही नहीं, बल्कि इनपुट डिवाइसों की एक श्रृंखला का समर्थन करना चाहिए।
• जावास्क्रिप्ट में पॉइंटर इवेंट माउस और टच इवेंट दोनों को संभालते हैं, जिससे उन्हें अलग से लागू करने की आवश्यकता समाप्त हो जाती है।
• पॉइंटर इवेंट में माउस इवेंट के समान नाम और कार्यक्षमता होती है, जिससे टच और पेन इनपुट का समर्थन करने के लिए मौजूदा कोड को अपडेट करना आसान हो जाता है।

कई वेब एप्लिकेशन मानते हैं कि उपयोगकर्ता का पॉइंटिंग डिवाइस एक माउस होगा, इसलिए वे इंटरैक्शन को संभालने के लिए माउस इवेंट का उपयोग करते हैं। हालाँकि, टचस्क्रीन उपकरणों के बढ़ने के साथ, उपयोगकर्ताओं को वेबसाइटों के साथ बातचीत करने के लिए माउस की आवश्यकता नहीं है। व्यापक संभव दर्शकों की जरूरतों को पूरा करने के लिए इनपुट उपकरणों की एक श्रृंखला का समर्थन करना आवश्यक है।

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

सूचक घटनाएँ क्या हैं?

पॉइंटर इवेंट एक वेब मानक है जो माउस, टच और पेन सहित वेब ब्राउज़र में विभिन्न इनपुट विधियों को संभालने का एक एकीकृत तरीका परिभाषित करता है। ये इवेंट विभिन्न उपकरणों पर वेब सामग्री के साथ बातचीत करने का एक सुसंगत और प्लेटफ़ॉर्म-स्वतंत्र तरीका प्रदान करते हैं।

संक्षेप में, पॉइंटर ईवेंट आपको स्रोत की परवाह किए बिना, उपयोगकर्ता इंटरैक्शन के इस समूह को संभालने में मदद करते हैं।

सूचक घटनाओं के प्रकार

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

निम्न तालिका माउस इवेंट की तुलना में विभिन्न पॉइंटर इवेंट दिखाती है:

आप देख सकते हैं कि संबंधित माउस इवेंट के बिना तीन अतिरिक्त पॉइंटर इवेंट हैं। आप इन घटनाओं के बारे में बाद में जानेंगे।

जावास्क्रिप्ट में पॉइंटर इवेंट का उपयोग करना

आप पॉइंटर इवेंट का उपयोग उसी तरह कर सकते हैं जैसे आप माउस इवेंट का उपयोग करते हैं। अधिकांश ईवेंट प्रबंधन की तरह, प्रक्रिया आमतौर पर इस पैटर्न का अनुसरण करती है:

1. DOM चयनकर्ता का उपयोग करें एक तत्व लाने के लिए.
2. का उपयोग addEventListener विधि, उस ईवेंट को निर्दिष्ट करें जिसमें आप रुचि रखते हैं और कॉलबैक फ़ंक्शन निर्दिष्ट करें।
3. कॉलबैक के तर्क के गुणों और विधियों का उपयोग करें आयोजन वस्तु।

यहां पॉइंटरमोव इवेंट का उपयोग करके एक उदाहरण दिया गया है:

// Get the target element
const target = document.getElementById('target');
// Add an event listener to your target element
target.addEventListener('pointermove', handlePointerMove);
// Function to handle pointer move event
functionhandlePointerMove(ev) {
// Handle the event however you want to
 target.textContent = `Moved at x: ${ev.clientX}, y: ${ev.clientY}`;
}

यह कोड ब्लॉक एक लक्ष्य तत्व को परिभाषित करता है और एक जावास्क्रिप्ट फ़ंक्शन को संभालने के लिए सूचक चाल घटना तो यह एक का उपयोग करता है जावास्क्रिप्ट इवेंट श्रोता पॉइंटर इवेंट और फ़ंक्शन को लक्ष्य तत्व से जोड़ने के लिए।

इस कोड का उपयोग करते हुए, "लक्ष्य" आईडी वाला एक तत्व सूचक निर्देशांक प्रदर्शित करेगा जब आप उस पर अपना कर्सर, उंगली या पेन ले जाएंगे:

आप अन्य पॉइंटर इवेंट का भी इसी तरह उपयोग कर सकते हैं।

सूचक रद्द घटना

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

• जब किसी उपयोगकर्ता को स्क्रीन पर किसी तत्व को खींचते समय कोई फ़ोन कॉल या कोई अन्य व्यवधान वाली सूचना प्राप्त होती है।
• जब डिवाइस का ओरिएंटेशन बदलता है.
• जब ब्राउज़र विंडो फोकस खो देती है.
• जब उपयोगकर्ता किसी अन्य टैब या एप्लिकेशन पर स्विच करता है।

साथ सूचक रद्द करें घटना, आप इन स्थितियों को जैसे चाहें वैसे संभाल सकते हैं। यहाँ एक उदाहरण है:

const target = document.getElementById('target');
target.addEventListener('pointercancel', (event) => {
// Handle the situation where the pointer cancels. For example, you
// can release the pointer capture
 target.releasePointerCapture(event.pointerId);
});

सूचक कैप्चरिंग

पॉइंटर कैप्चरिंग एक ऐसी सुविधा है जो एक विशिष्ट सुविधा देती है HTML तत्व किसी विशेष पॉइंटर के लिए सभी पॉइंटर ईवेंट को कैप्चर करें और उन पर प्रतिक्रिया दें, भले ही वे ईवेंट तत्व की सीमा के बाहर घटित हों।

आप किसी तत्व के लिए पॉइंटर कैप्चर सेट कर सकते हैं सेटपॉइंटरकैप्चर() विधि और के साथ एक पॉइंटर कैप्चर जारी करें रिलीजपॉइंटरकैप्चर() तरीका।

गॉटपॉइंटरकैप्चर और खोया हुआ सूचक पॉइंटर इवेंट पॉइंटर कैप्चरिंग के लिए उपयोगी होते हैं।

गॉटपॉइंटरकैप्चर इवेंट

गॉटपॉइंटरकैप्चर जब भी कोई तत्व पॉइंटर कैप्चर प्राप्त करता है तो ईवेंट ट्रिगर हो जाता है। आप पॉइंटर इवेंट को संभालने के लिए अपने HTML तत्व के लिए एक स्थिति आरंभ करने के लिए इस इवेंट का उपयोग कर सकते हैं। उदाहरण के लिए, किसी ड्राइंग एप्लिकेशन में, आप इसका उपयोग कर सकते हैं गॉटपॉइंटरकैप्चर कर्सर की प्रारंभिक स्थिति निर्धारित करने के लिए ईवेंट।

लॉस्टपॉइंटरकैप्चर इवेंट

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

सूचक घटनाओं के गुण

पॉइंटर इवेंट में ऐसे गुण होते हैं जो आपकी वेबसाइट को अधिक इंटरैक्टिव और प्रतिक्रियाशील बनाने में आपकी सहायता करेंगे। माउस इवेंट के गुण वही गुण हैं जो आपको पॉइंटर इवेंट में मिलेंगे, साथ ही कुछ अतिरिक्त गुण भी। यह आलेख कुछ अतिरिक्त गुणों की व्याख्या करता है।

सूचक आईडी संपत्ति

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

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

यह गुण स्पर्श उपकरणों के लिए विशेष रूप से उपयोगी है। जो डिवाइस माउस पॉइंटर्स पर निर्भर होते हैं उनमें एक समय में केवल एक पॉइंटर इनपुट हो सकता है, बिना किसी बाहरी डिवाइस से जुड़े हुए।

यहां एक सरल उदाहरण दिया गया है जो प्रत्येक पॉइंटर इनपुट की आईडी को कंसोल पर प्रिंट करता है:

const target = document.getElementById('target');
target.addEventListener('pointerdown', (event) => {
console.log(`Pointer ID: ${event.pointerId}`);
// Handle the pointer down event for the specific pointerId
});

सूचक प्रकार संपत्ति

पॉइंटरटाइप प्रॉपर्टी आपको विभिन्न प्रकार के पॉइंटर इनपुट के बीच अंतर करने में मदद करती है और आपको उनके आधार पर संचालन करने देती है। आप माउस, पेन और फिंगर टच के बीच अंतर कर सकते हैं। यह प्रॉपर्टी केवल तीन स्ट्रिंग इनपुट में से एक ले सकती है: "माउस", "पेन", या "टच"। इसका उपयोग कैसे करें इसका एक सरल उदाहरण यहां दिया गया है सूचक प्रकार संपत्ति:

functionhandlePointerEvent(event){
// Using the pointerType property
switch (event.pointerType) {
case'mouse':
// Handle the situation where the pointing device is a mouse
console.log(`Mouse Pointer ID: ${event.pointerId}`);
break;
case'pen':
// Handle the situation where the pointing device is a stylus
console.log(`Stylus Pointer ID: ${event.pointerId}`);
break;
case'touch':
// Handle the situation where the pointing device is a finger touch
console.log(`Touch Pointer ID: ${event.pointerId}`);
break;
default:
// Handle other pointer types or cases
console.log(`pointerType ${event.pointerType} is not supported`);
break;
 }
}
// Attach pointer events to elements
element.addEventListener('pointerdown', handlePointerEvent);

चौड़ाई और ऊंचाई गुण

ये गुण मिलीमीटर में सूचक के संपर्क क्षेत्र की चौड़ाई और ऊंचाई का प्रतिनिधित्व करते हैं। कुछ ब्राउज़र उनका समर्थन नहीं करते हैं, और ऐसे ब्राउज़र में उनका मान हमेशा 1 रहेगा।

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

अधिकांश बार, आप स्पर्श घटनाओं के लिए चौड़ाई और ऊंचाई गुणों का उपयोग करेंगे।

अधिक समावेशिता के लिए पॉइंटर इवेंट का उपयोग करें

पॉइंटर इवेंट आपको बहुत अधिक तनाव से गुज़रे बिना उपकरणों और इनपुट प्रकारों की एक विस्तृत श्रृंखला को पूरा करने की अनुमति देते हैं। आपको आधुनिक मानकों के अनुरूप और बेहतर वेब बनाने में सहायता के लिए हमेशा अपने अनुप्रयोगों में उनका उपयोग करना चाहिए।