टचस्क्रीन वाले फ़ोन से लेकर डेस्कटॉप तक, कई तरह के डिवाइसों पर उपलब्ध हैं. आपके ऐप्लिकेशन को बच्चे के टच का जवाब देने के लिए, उसे आसान और खूबसूरत तरीके से इस्तेमाल करना चाहिए.
टचस्क्रीन, फ़ोन से लेकर डेस्कटॉप स्क्रीन जैसे कई डिवाइसों पर उपलब्ध है. जब आपके उपयोगकर्ता आपके यूज़र इंटरफ़ेस (यूआई) से इंटरैक्ट करना चुनते हैं, तब आपके ऐप्लिकेशन को उनके टच का आसान तरीके से जवाब देना चाहिए.
एलिमेंट की स्थितियों का जवाब देना
क्या आपने कभी वेब पेज पर किसी एलिमेंट को छू लिया है या उस पर क्लिक किया है और यह सवाल किया है कि क्या साइट ने वाकई उसे ढूंढा है?
यूज़र इंटरफ़ेस के हिस्सों को छूते या उनसे इंटरैक्ट करते समय, एलिमेंट के रंग में बदलाव करने से, इस बात को बुनियादी तौर पर पक्का किया जा सकता है कि आपकी साइट काम कर रही है. इससे न सिर्फ़ झंझट कम होती है, बल्कि यह चकाचौंध भी दे सकता है.
डीओएम एलिमेंट, इनमें से किसी भी स्थिति को इनहेरिट कर सकता है: डिफ़ॉल्ट, फ़ोकस, कर्सर घुमाना, और चालू करना. इनमें से हर एक स्थिति के लिए यूज़र इंटरफ़ेस (यूआई) बदलने के लिए, हमें नीचे दी गई छद्म क्लास :hover
, :focus
और :active
पर स्टाइल लागू करनी होंगी, जैसा कि यहां दिखाया गया है:
.btn {
background-color: #4285f4;
}
.btn:hover {
background-color: #296cdb;
}
.btn:focus {
background-color: #0f52c1;
/* The outline parameter suppresses the border
color / outline when focused */
outline: 0;
}
.btn:active {
background-color: #0039a8;
}
ज़्यादातर मोबाइल ब्राउज़र पर, किसी एलिमेंट पर टैप करने के बाद, उस पर hover और/या hover की स्थितियां लागू हो जाती हैं.
इस बात पर ध्यान से विचार करें कि आपने कौनसी स्टाइल सेट की हैं और उपयोगकर्ताओं को टच करने के बाद वे किस तरह दिखेंगे.
ब्राउज़र की डिफ़ॉल्ट स्टाइल हटाई जा रही हैं
अलग-अलग स्थितियों के लिए स्टाइल जोड़ने के बाद, ज़्यादातर ब्राउज़र
उपयोगकर्ता की स्टाइल को ध्यान में रखते हुए अपनी-अपनी स्टाइल लागू करते हैं. ऐसा इसलिए है, क्योंकि पहली बार मोबाइल डिवाइस लॉन्च होने पर, कई साइटों में :active
स्थिति के लिए स्टाइल नहीं थी. इस वजह से, कई ब्राउज़र ने उपयोगकर्ता को सुझाव देने के लिए, रंग या स्टाइल में ज़्यादा हाइलाइट किया.
जब किसी एलिमेंट पर फ़ोकस किया गया होता है, तब ज़्यादातर ब्राउज़र उस एलिमेंट के चारों ओर रिंग दिखाने के लिए, outline
सीएसएस प्रॉपर्टी का इस्तेमाल करते हैं. आप इसे इसके साथ छिपा सकते हैं:
.btn:focus {
outline: 0;
/* Add replacement focus styling here (i.e. border) */
}
Safari और Chrome में टैप करके हाइलाइट करने के लिए एक रंग जोड़ा जाता है, जिसे
-webkit-tap-highlight-color
सीएसएस प्रॉपर्टी से रोका जा सकता है:
/* Webkit / Chrome Specific CSS to remove tap
highlight color */
.btn {
-webkit-tap-highlight-color: transparent;
}
Windows Phone पर Internet Explorer इसी तरह का काम करता है, लेकिन इसे मेटा टैग के ज़रिए दबा दिया जाता है:
<meta name="msapplication-tap-highlight" content="no">
Firefox के दो साइड इफ़ेक्ट होते हैं.
छुए जा सकने वाले एलिमेंट पर आउटलाइन जोड़ने वाला -moz-focus-inner
स्यूडो क्लास, border: 0
को सेट करके हटाया जा सकता है.
अगर Firefox पर <button>
एलिमेंट का इस्तेमाल किया जा रहा है, तो आपको ग्रेडिएंट लागू
किया जाता है, जिसे background-image: none
को सेट करके हटाया जा सकता है.
/* Firefox Specific CSS to remove button
differences and focus ring */
.btn {
background-image: none;
}
.btn::-moz-focus-inner {
border: 0;
}
उपयोगकर्ता की चुनी हुई कैटगरी को बंद किया जा रहा है
अपना यूज़र इंटरफ़ेस (यूआई) बनाते समय कई बार ऐसा हो सकता है कि उपयोगकर्ता आपके एलिमेंट के साथ इंटरैक्ट करें. हालांकि, आपको यूज़र इंटरफ़ेस (यूआई) पर माउस को देर तक दबाने या खींचकर छोड़ने पर, टेक्स्ट चुनने के डिफ़ॉल्ट व्यवहार को रोकना हो.
user-select
सीएसएस प्रॉपर्टी का इस्तेमाल करके ऐसा किया जा सकता है. हालांकि, ध्यान रखें कि कॉन्टेंट में ऐसा करने से, उपयोगकर्ताओं को एलिमेंट में टेक्स्ट चुनने में extremely परेशानी हो सकती है.
इसलिए, इसका इस्तेमाल सावधानी से और कम से कम करें.
/* Example: Disable selecting text on a paragraph element: */
p.disable-text-selection {
user-select: none;
}
पसंद के मुताबिक हाथ के जेस्चर लागू करना
अगर आपके पास अपनी साइट के लिए कस्टम इंटरैक्शन और हाथ के जेस्चर (हाव-भाव) का कोई आइडिया है, तो इन दो विषयों को ध्यान में रखें:
- सभी ब्राउज़र के साथ काम करने का तरीका.
- फ़्रेम रेट को ज़्यादा रखने का तरीका.
इस लेख में हम इन विषयों पर बात करेंगे जिसमें उन एपीआई की जानकारी शामिल है जो सभी ब्राउज़र को हिट करने के लिए ज़रूरी हैं. साथ ही, हम इन इवेंट का सही तरीके से इस्तेमाल करने के तरीके पर भी बात करेंगे.
आपके जेस्चर से क्या करना है, इस आधार पर उपयोगकर्ता को एक समय में एक एलिमेंट से इंटरैक्ट करने की अनुमति देनी होगी या उसे एक ही समय में कई एलिमेंट से इंटरैक्ट करने देना है.
हम इस लेख में दो उदाहरण देखेंगे. इन दोनों में, सभी ब्राउज़र पर काम करने और फ़्रेम रेट को ज़्यादा बनाए रखने के तरीके के बारे में बताया गया है.
पहले उदाहरण में, उपयोगकर्ता किसी एक एलिमेंट से इंटरैक्ट कर सकता है. इस मामले में हो सकता है कि आप सभी टच इवेंट को उस एक एलिमेंट के लिए देना चाहें, जब तक कि हाथ का जेस्चर एलिमेंट पर ही शुरू हो. उदाहरण के लिए, स्वाइप किए जा सकने वाले एलिमेंट को उंगली से दूसरी जगह ले जाने से भी वह एलिमेंट कंट्रोल किया जा सकता है.
यह उपयोगी है, क्योंकि यह उपयोगकर्ताओं को बहुत ज़्यादा सुविधा देता है, लेकिन उपयोगकर्ता आपके यूज़र इंटरफ़ेस (यूआई) से इंटरैक्ट करने के तरीके पर पाबंदी लगा सकता है.
हालांकि, अगर आपको उम्मीद है कि उपयोगकर्ता एक ही समय पर कई एलिमेंट के साथ इंटरैक्ट करेंगे (मल्टी-टच सुविधा का इस्तेमाल करके), तो आपको टच को किसी खास एलिमेंट तक सीमित रखना चाहिए.
इसे इस्तेमाल करने वाले लोगों के लिए ज़्यादा सुविधाजनक बनाया जा सकता है. हालांकि, इससे यूज़र इंटरफ़ेस (यूआई) में हेर-फेर करने के लॉजिक की प्रोसेस आसान हो जाती है. साथ ही, उपयोगकर्ता की गड़बड़ी को आसानी से मैनेज भी नहीं किया जा सकता.
इवेंट लिसनर जोड़ें
Chrome (55 और इसके बाद के वर्शन) में, Internet Explorer & Edge में,
PointerEvents
इस्तेमाल करने का सुझाव दिया जाता है. सुझाए गए तरीके में, पसंद के मुताबिक हाथ के जेस्चर लागू किए जा सकते हैं.
दूसरे ब्राउज़र में, TouchEvents
और MouseEvents
सही तरीका है.
PointerEvents
की सबसे अच्छी सुविधा यह है कि इसमें कई तरह के इनपुट मर्ज किए जाते हैं. इन इनपुट में माउस, टच और पेन इवेंट शामिल हैं. इन्हें कॉलबैक के एक सेट में मर्ज किया जाता है. सुनने के लिए इवेंट, pointerdown
, pointermove
,
pointerup
, और pointercancel
हैं.
दूसरे ब्राउज़र में, टच इवेंट के लिए touchstart
, touchmove
, touchend
, और touchcancel
जैसी सुविधाएं मिलती हैं. अगर आपको माउस इनपुट के लिए यही जेस्चर लागू करना है, तो आपको mousedown
,mousemove
, और mouseup
लागू करना होगा.
अगर इस्तेमाल करने के बारे में आपका सवाल है, तो टच, माउस, और पॉइंटर इवेंट की यह टेबल देखें.
इन इवेंट का इस्तेमाल करने के लिए, डीओएम एलिमेंट पर addEventListener()
तरीके को कॉल करना ज़रूरी होता है. साथ ही, इवेंट के नाम, कॉलबैक फ़ंक्शन, और बूलियन को भी कॉल करना होता है.
बूलियन यह तय करता है कि अन्य एलिमेंट को इवेंट को कैप्चर करने से पहले या बाद में, इवेंट को
पकड़े जाने से पहले या बाद में. (true
का मतलब है कि आपको इवेंट को दूसरे एलिमेंट से पहले शामिल करना है.)
इंटरैक्शन की शुरुआत को सुनने का एक उदाहरण यहां दिया गया है.
// Check if pointer events are supported.
if (window.PointerEvent) {
// Add Pointer Event Listener
swipeFrontElement.addEventListener('pointerdown', this.handleGestureStart, true);
swipeFrontElement.addEventListener('pointermove', this.handleGestureMove, true);
swipeFrontElement.addEventListener('pointerup', this.handleGestureEnd, true);
swipeFrontElement.addEventListener('pointercancel', this.handleGestureEnd, true);
} else {
// Add Touch Listener
swipeFrontElement.addEventListener('touchstart', this.handleGestureStart, true);
swipeFrontElement.addEventListener('touchmove', this.handleGestureMove, true);
swipeFrontElement.addEventListener('touchend', this.handleGestureEnd, true);
swipeFrontElement.addEventListener('touchcancel', this.handleGestureEnd, true);
// Add Mouse Listener
swipeFrontElement.addEventListener('mousedown', this.handleGestureStart, true);
}
सिंगल-एलिमेंट इंटरैक्शन मैनेज करना
ऊपर दिए गए कोड के छोटे स्निपेट में, हमने सिर्फ़ माउस इवेंट के लिए शुरुआती इवेंट लिसनर जोड़ा है. इसकी वजह यह है कि माउस इवेंट सिर्फ़ तब ट्रिगर होंगे, जब कर्सर उस एलिमेंट पर होगा जिसमें इवेंट लिसनर को जोड़ा गया है.
टच किए जाने की प्रोसेस शुरू होने के बाद TouchEvents
, जेस्चर को ट्रैक करेगा, भले ही टच
किसी भी जगह पर हो. साथ ही, PointerEvents
, इवेंट को ट्रैक करेगा, चाहे हमारे DOM एलिमेंट पर setPointerCapture
को कॉल करने के बाद कहीं भी टच किया गया हो.
माउस मूव और एंड इवेंट के लिए हम इवेंट लिसनर को जेस्चर शुरू करने के तरीके में जोड़ते हैं और लिसनर को दस्तावेज़ में जोड़ते हैं. इसका मतलब है कि यह कर्सर को तब तक ट्रैक कर सकता है, जब तक जेस्चर पूरा नहीं हो जाता.
इसे लागू करने के लिए, यह तरीका अपनाया जा सकता है:
- सभी TouchEvent और PointerEvent श्रोता जोड़ें. माउस इवेंट के लिए सिर्फ़ शुरुआती इवेंट जोड़ें.
- स्टार्ट जेस्चर कॉलबैक के अंदर, माउस मूव करें और इवेंट खत्म करें को दस्तावेज़ से बाइंड करें. इस तरह सभी माउस इवेंट मिलते हैं, भले ही इवेंट मूल एलिमेंट पर हो या नहीं. पॉइंटर इवेंट के लिए
हमें अपने मूल एलिमेंट पर
setPointerCapture()
को कॉल करना होगा, ताकि आने वाले सभी इवेंट की जानकारी मिल सके. इसके बाद, हाथ के जेस्चर की शुरुआत को हैंडल करें. - आइटम को दूसरी जगह ले जाने से जुड़े इवेंट को मैनेज करना.
- इवेंट खत्म होने पर, दस्तावेज़ से माउस मूव और एंड लिसनर को हटाएं और जेस्चर खत्म करें.
नीचे हमारे handleGestureStart()
तरीके का एक स्निपेट दिया गया है, जो दस्तावेज़ में ले जाने और खत्म करने के इवेंट जोड़ता है:
// Handle the start of gestures
this.handleGestureStart = function(evt) {
evt.preventDefault();
if(evt.touches && evt.touches.length > 1) {
return;
}
// Add the move and end listeners
if (window.PointerEvent) {
evt.target.setPointerCapture(evt.pointerId);
} else {
// Add Mouse Listeners
document.addEventListener('mousemove', this.handleGestureMove, true);
document.addEventListener('mouseup', this.handleGestureEnd, true);
}
initialTouchPos = getGesturePointFromEvent(evt);
swipeFrontElement.style.transition = 'initial';
}.bind(this);
हम handleGestureEnd()
एंड कॉलबैक जोड़ते हैं, जो दस्तावेज़ से मूव और एंड इवेंट लिसनर को हटा देता है. साथ ही, जेस्चर के खत्म होने पर पॉइंटर कैप्चर को इस तरह रिलीज़ करता है:
// Handle end gestures
this.handleGestureEnd = function(evt) {
evt.preventDefault();
if (evt.touches && evt.touches.length > 0) {
return;
}
rafPending = false;
// Remove Event Listeners
if (window.PointerEvent) {
evt.target.releasePointerCapture(evt.pointerId);
} else {
// Remove Mouse Listeners
document.removeEventListener('mousemove', this.handleGestureMove, true);
document.removeEventListener('mouseup', this.handleGestureEnd, true);
}
updateSwipeRestPosition();
initialTouchPos = null;
}.bind(this);
दस्तावेज़ में मूव इवेंट जोड़ने के इस पैटर्न का पालन करके, अगर उपयोगकर्ता किसी एलिमेंट के साथ इंटरैक्ट करना शुरू करता है और अपने जेस्चर को एलिमेंट के बाहर मूव करता है, तो हम माउस की गतिविधि जारी रखेंगे, फिर चाहे वह पेज पर कहीं भी हो, क्योंकि इवेंट दस्तावेज़ से मिल रहे हैं.
इस डायग्राम में दिखाया गया है कि जेस्चर शुरू होने के बाद, दस्तावेज़ में मूव और एंड इवेंट जोड़ते समय, टच इवेंट क्या कर रहे हैं.
टच का बेहतर तरीके से जवाब देना
अब जब हमने शुरू और खत्म होने वाले इवेंट पर ध्यान दे दिया है, तो हम असल में टच इवेंट का जवाब दे सकते हैं.
किसी भी इवेंट को शुरू करने और ले जाने के लिए, किसी इवेंट से x
और y
को आसानी से एक्सट्रैक्ट किया जा सकता है.
यहां दिया गया उदाहरण यह जांचता है कि इवेंट, TouchEvent
से है या नहीं. इसके लिए,
यह जांच की जाती है कि targetTouches
मौजूद है या नहीं. अगर ऐसा होता है, तो यह पहले टच से
clientX
और clientY
को एक्सट्रैक्ट कर देता है.
अगर इवेंट PointerEvent
या MouseEvent
है, तो यह सीधे इवेंट से clientX
और
clientY
को निकालता है.
function getGesturePointFromEvent(evt) {
var point = {};
if (evt.targetTouches) {
// Prefer Touch Events
point.x = evt.targetTouches[0].clientX;
point.y = evt.targetTouches[0].clientY;
} else {
// Either Mouse event or Pointer Event
point.x = evt.clientX;
point.y = evt.clientY;
}
return point;
}
TouchEvent
में टच डेटा वाली तीन सूचियां हैं:
touches
: स्क्रीन पर किए गए सभी मौजूदा एलिमेंट की सूची, चाहे वे DOM एलिमेंट पर क्यों न हों.targetTouches
: फ़िलहाल, उस DOM एलिमेंट पर टच की सूची जिससे इवेंट जुड़ा है.changedTouches
: ऐसे टच की सूची जिसमें बदलाव होने की वजह से इवेंट चालू हुआ.
ज़्यादातर मामलों में, targetTouches
आपको वह सब कुछ देता है जिसकी आपको ज़रूरत है. (इन सूचियों के बारे में ज़्यादा जानकारी के लिए, टच के लिए बनी सूचियां देखें).
requestAnimationFrame का इस्तेमाल करें
इवेंट कॉलबैक, मुख्य थ्रेड पर ट्रिगर होते हैं. इसलिए, हम अपने इवेंट के लिए कॉलबैक में ज़्यादा से ज़्यादा छोटे कोड चलाना चाहते हैं, ताकि हमारा फ़्रेम रेट ज़्यादा रहे और जैंक होने से बचा जा सके.
requestAnimationFrame()
का इस्तेमाल करके, हमारे पास यूज़र इंटरफ़ेस (यूआई) को अपडेट करने का एक मौका है, जो ब्राउज़र के फ़्रेम बनाने से ठीक पहले होता है. इससे हमें अपने इवेंट कॉलबैक से कुछ काम करने में मदद मिलेगी.
अगर आपको requestAnimationFrame()
के बारे में पता नहीं है, तो यहां ज़्यादा जानें.
एक सामान्य तरीका यह है कि शुरू और मूव करने वाले इवेंट से x
और y
कोऑर्डिनेट सेव किए जाएं और मूव इवेंट कॉलबैक में एक ऐनिमेशन फ़्रेम का अनुरोध करें.
हमारे डेमो में, हम शुरुआती टच पोज़िशन को handleGestureStart()
में सेव करते हैं (initialTouchPos
देखें):
// Handle the start of gestures
this.handleGestureStart = function(evt) {
evt.preventDefault();
if (evt.touches && evt.touches.length > 1) {
return;
}
// Add the move and end listeners
if (window.PointerEvent) {
evt.target.setPointerCapture(evt.pointerId);
} else {
// Add Mouse Listeners
document.addEventListener('mousemove', this.handleGestureMove, true);
document.addEventListener('mouseup', this.handleGestureEnd, true);
}
initialTouchPos = getGesturePointFromEvent(evt);
swipeFrontElement.style.transition = 'initial';
}.bind(this);
ऐनिमेशन फ़्रेम का अनुरोध करने से पहले, handleGestureMove()
वाला तरीका अपने इवेंट की जगह को सेव करता है. ज़रूरत पड़ने पर, यह हमारे onAnimFrame()
फ़ंक्शन को कॉलबैक के तौर पर पास करता है:
this.handleGestureMove = function (evt) {
evt.preventDefault();
if (!initialTouchPos) {
return;
}
lastTouchPos = getGesturePointFromEvent(evt);
if (rafPending) {
return;
}
rafPending = true;
window.requestAnimFrame(onAnimFrame);
}.bind(this);
onAnimFrame
वैल्यू एक ऐसा फ़ंक्शन है जिसे कॉल करने पर, यूज़र इंटरफ़ेस (यूआई) में बदलाव करके उसे इधर-उधर ले जाया जाता है. इस फ़ंक्शन को requestAnimationFrame()
में पास करने पर, हम ब्राउज़र को यह बताते हैं कि पेज अपडेट होने से ठीक पहले, उसे कॉल किया जाए. इसका मतलब है कि पेज में किसी भी बदलाव को लागू किया जा सकता है.
handleGestureMove()
कॉलबैक में, हम शुरुआत में यह देखते हैं कि rafPending
गलत है या नहीं. इससे पता चलता है कि आखिरी बार ले जाने के इवेंट के बाद से, requestAnimationFrame()
ने onAnimFrame()
को कॉल किया है या नहीं. इसका मतलब है कि एक बार में चलने के लिए हमारे पास सिर्फ़ एक requestAnimationFrame()
है.
जब हमारा onAnimFrame()
कॉलबैक लागू होता है, तो हम rafPending
को false
पर अपडेट करने से पहले, उन सभी एलिमेंट पर ट्रांसफ़ॉर्म सेट करते हैं जिन्हें हमें
ले जाना है. इससे अगले टच इवेंट में, नए ऐनिमेशन फ़्रेम का अनुरोध किया जा सकता है.
function onAnimFrame() {
if (!rafPending) {
return;
}
var differenceInX = initialTouchPos.x - lastTouchPos.x;
var newXTransform = (currentXPosition - differenceInX)+'px';
var transformStyle = 'translateX('+newXTransform+')';
swipeFrontElement.style.webkitTransform = transformStyle;
swipeFrontElement.style.MozTransform = transformStyle;
swipeFrontElement.style.msTransform = transformStyle;
swipeFrontElement.style.transform = transformStyle;
rafPending = false;
}
टच कार्रवाइयों का इस्तेमाल करके जेस्चर कंट्रोल करना
सीएसएस प्रॉपर्टी touch-action
की मदद से, किसी एलिमेंट के डिफ़ॉल्ट टच व्यवहार को कंट्रोल किया जा सकता है. अपने उदाहरणों में, हम touch-action: none
का इस्तेमाल ब्राउज़र को उपयोगकर्ता के टच से कुछ भी करने से रोकने के लिए करते हैं. इससे हम सभी टच इवेंट को बीच में रोक पाते हैं.
/* Pass all touches to javascript: */
button.custom-touch-logic {
touch-action: none;
}
touch-action: none
का इस्तेमाल करना कुछ हद तक न्यूक्लियर विकल्प है, क्योंकि यह ब्राउज़र की सभी डिफ़ॉल्ट गतिविधियों को रोकता है. कई मामलों में, नीचे दिए गए विकल्पों में से एक
बेहतर समाधान है.
touch-action
आपको ब्राउज़र के ज़रिए लागू किए गए जेस्चर बंद करने की सुविधा देता है.
उदाहरण के लिए, IE10+ पर दो बार टैप करके जेस्चर को ज़ूम करें. manipulation
के लिए touch-action
सेट करने पर, डिफ़ॉल्ट तौर पर दो बार टैप करने की सुविधा को रोका जा सकता है.
इससे आपको खुद ही दो बार टैप करने वाले जेस्चर को लागू करने की सुविधा मिलती है.
आम तौर पर इस्तेमाल की जाने वाली touch-action
वैल्यू की सूची नीचे दी गई है:
IE के पुराने वर्शन के साथ काम करना
IE10 के साथ काम करने के लिए, आपको PointerEvents
के वेंडर प्रीफ़िक्स वाले वर्शन को मैनेज करना होगा.
आम तौर पर, PointerEvents
से जुड़ी सहायता पाने के लिए, आपको
window.PointerEvent
की जानकारी चाहिए, लेकिन IE10 में इसके लिए आपको
window.navigator.msPointerEnabled
खोजना होगा.
इवेंट के वेंडर के प्रीफ़िक्स वाले इवेंट के नाम हैं: 'MSPointerDown'
, 'MSPointerUp'
, और
'MSPointerMove'
.
नीचे दिए गए उदाहरण में, सहायता की जांच करने और इवेंट के नाम बदलने का तरीका बताया गया है.
var pointerDownName = 'pointerdown';
var pointerUpName = 'pointerup';
var pointerMoveName = 'pointermove';
if (window.navigator.msPointerEnabled) {
pointerDownName = 'MSPointerDown';
pointerUpName = 'MSPointerUp';
pointerMoveName = 'MSPointerMove';
}
// Simple way to check if some form of pointerevents is enabled or not
window.PointerEventsSupport = false;
if (window.PointerEvent || window.navigator.msPointerEnabled) {
window.PointerEventsSupport = true;
}
ज़्यादा जानकारी के लिए, Microsoft का अपडेट लेख पढ़ें.
रेफ़रंस
टच स्टेट के लिए बदली हुई स्यूडो क्लास
खास टच इवेंट का रेफ़रंस यहां मिल सकता है: W3C टच इवेंट.
टच, माउस, और पॉइंटर इवेंट
ये इवेंट आपके ऐप्लिकेशन में नए जेस्चर जोड़ने के ज़रूरी हिस्सा हैं:
टच सूचियां
हर टच इवेंट में, सूची के तीन एट्रिब्यूट शामिल होते हैं:
iOS पर सक्रिय स्थिति सहायता सक्षम करना
माफ़ करें, iOS पर Safari डिफ़ॉल्ट रूप से ऐक्टिव स्थिति को लागू नहीं करता है. इसके लिए, आपको दस्तावेज़ के मुख्य हिस्से या हर एलिमेंट में touchstart
इवेंट लिसनर जोड़ना होगा.
आपको उपयोगकर्ता एजेंट टेस्ट में ऐसा करना चाहिए, ताकि यह सिर्फ़ iOS डिवाइसों पर चले.
मुख्य भाग में टच स्टार्ट जोड़ने से DOM में सभी एलिमेंट पर लागू करने का फ़ायदा होता है, हालांकि, पेज स्क्रोल करते समय परफ़ॉर्मेंस से जुड़ी समस्याएं हो सकती हैं.
window.onload = function() {
if (/iP(hone|ad)/.test(window.navigator.userAgent)) {
document.body.addEventListener('touchstart', function() {}, false);
}
};
दूसरा विकल्प यह है कि पेज पर मौजूद, इंटरैक्ट करने लायक सभी एलिमेंट में टच स्टार्ट लिसनर को जोड़ा जाए, ताकि परफ़ॉर्मेंस से जुड़ी कुछ समस्याएं दूर हो सकें.
window.onload = function() {
if (/iP(hone|ad)/.test(window.navigator.userAgent)) {
var elements = document.querySelectorAll('button');
var emptyFunction = function() {};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('touchstart', emptyFunction, false);
}
}
};