अपनी साइट को बेहतर बनाएं

टचस्क्रीन वाले फ़ोन से लेकर डेस्कटॉप तक, कई तरह के डिवाइसों पर उपलब्ध हैं. आपके ऐप्लिकेशन को बच्चे के टच का जवाब देने के लिए, उसे आसान और खूबसूरत तरीके से इस्तेमाल करना चाहिए.

मैट गौंट

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

एलिमेंट की स्थितियों का जवाब देना

क्या आपने कभी वेब पेज पर किसी एलिमेंट को छू लिया है या उस पर क्लिक किया है और यह सवाल किया है कि क्या साइट ने वाकई उसे ढूंढा है?

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

डीओएम एलिमेंट, इनमें से किसी भी स्थिति को इनहेरिट कर सकता है: डिफ़ॉल्ट, फ़ोकस, कर्सर घुमाना, और चालू करना. इनमें से हर एक स्थिति के लिए यूज़र इंटरफ़ेस (यूआई) बदलने के लिए, हमें नीचे दी गई छद्म क्लास :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;
}

पसंद के मुताबिक हाथ के जेस्चर लागू करना

अगर आपके पास अपनी साइट के लिए कस्टम इंटरैक्शन और हाथ के जेस्चर (हाव-भाव) का कोई आइडिया है, तो इन दो विषयों को ध्यान में रखें:

  1. सभी ब्राउज़र के साथ काम करने का तरीका.
  2. फ़्रेम रेट को ज़्यादा रखने का तरीका.

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

आपके जेस्चर से क्या करना है, इस आधार पर उपयोगकर्ता को एक समय में एक एलिमेंट से इंटरैक्ट करने की अनुमति देनी होगी या उसे एक ही समय में कई एलिमेंट से इंटरैक्ट करने देना है.

हम इस लेख में दो उदाहरण देखेंगे. इन दोनों में, सभी ब्राउज़र पर काम करने और फ़्रेम रेट को ज़्यादा बनाए रखने के तरीके के बारे में बताया गया है.

दस्तावेज़ पर टच का GIF का उदाहरण

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

यह उपयोगी है, क्योंकि यह उपयोगकर्ताओं को बहुत ज़्यादा सुविधा देता है, लेकिन उपयोगकर्ता आपके यूज़र इंटरफ़ेस (यूआई) से इंटरैक्ट करने के तरीके पर पाबंदी लगा सकता है.

एलिमेंट पर टच का उदाहरण

हालांकि, अगर आपको उम्मीद है कि उपयोगकर्ता एक ही समय पर कई एलिमेंट के साथ इंटरैक्ट करेंगे (मल्टी-टच सुविधा का इस्तेमाल करके), तो आपको टच को किसी खास एलिमेंट तक सीमित रखना चाहिए.

इसे इस्तेमाल करने वाले लोगों के लिए ज़्यादा सुविधाजनक बनाया जा सकता है. हालांकि, इससे यूज़र इंटरफ़ेस (यूआई) में हेर-फेर करने के लॉजिक की प्रोसेस आसान हो जाती है. साथ ही, उपयोगकर्ता की गड़बड़ी को आसानी से मैनेज भी नहीं किया जा सकता.

इवेंट लिसनर जोड़ें

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 को कॉल करने के बाद कहीं भी टच किया गया हो.

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

इसे लागू करने के लिए, यह तरीका अपनाया जा सकता है:

  1. सभी TouchEvent और PointerEvent श्रोता जोड़ें. माउस इवेंट के लिए सिर्फ़ शुरुआती इवेंट जोड़ें.
  2. स्टार्ट जेस्चर कॉलबैक के अंदर, माउस मूव करें और इवेंट खत्म करें को दस्तावेज़ से बाइंड करें. इस तरह सभी माउस इवेंट मिलते हैं, भले ही इवेंट मूल एलिमेंट पर हो या नहीं. पॉइंटर इवेंट के लिए हमें अपने मूल एलिमेंट पर setPointerCapture() को कॉल करना होगा, ताकि आने वाले सभी इवेंट की जानकारी मिल सके. इसके बाद, हाथ के जेस्चर की शुरुआत को हैंडल करें.
  3. आइटम को दूसरी जगह ले जाने से जुड़े इवेंट को मैनेज करना.
  4. इवेंट खत्म होने पर, दस्तावेज़ से माउस मूव और एंड लिसनर को हटाएं और जेस्चर खत्म करें.

नीचे हमारे 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 वैल्यू की सूची नीचे दी गई है:

टच कार्रवाई पैरामीटर
touch-action: none ब्राउज़र, टच इंटरैक्शन को मैनेज नहीं करेगा.
touch-action: pinch-zoom इससे सभी ब्राउज़र इंटरैक्शन, जैसे कि `टच-ऐक्शन: कोई भी नहीं` बंद हो जाते हैं. हालांकि, `पिंच-ज़ूम` करने की सुविधा को अब भी ब्राउज़र मैनेज करता है.
touch-action: pan-y pinch-zoom वर्टिकल स्क्रोल या पिंच-ज़ूम करने (जैसे कि इमेज कैरसेल) को बंद किए बिना, JavaScript में हॉरिज़ॉन्टल स्क्रोल को हैंडल करें.
touch-action: manipulation इससे दो बार टैप करने का जेस्चर बंद हो जाता है, जो ब्राउज़र को क्लिक मिलने में देरी से बचाता है. इससे ब्राउज़र पर स्क्रोल करना और पिंच-अप करना छोड़ दिया जाता है.

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 का अपडेट लेख पढ़ें.

रेफ़रंस

टच स्टेट के लिए बदली हुई स्यूडो क्लास

कक्षा उदाहरण जानकारी
:hover
बटन को दबाया गया है
जब कर्सर को किसी एलिमेंट के ऊपर रखा जाता है, तब डाला जाता है. कर्सर घुमाने पर, यूज़र इंटरफ़ेस (यूआई) में बदलाव करने से, उपयोगकर्ताओं को एलिमेंट के साथ इंटरैक्ट करने में मदद मिलती है.
:फ़ोकस
फ़ोकस स्टेट वाला बटन
इसे तब डाला जाता है, जब उपयोगकर्ता किसी पेज पर मौजूद एलिमेंट को टैब करता है. फ़ोकस स्टेट से उपयोगकर्ता को यह पता चलता है कि वे फ़िलहाल किस एलिमेंट के साथ इंटरैक्ट कर रहे हैं. साथ ही, उपयोगकर्ता कीबोर्ड का इस्तेमाल करके, आपके यूज़र इंटरफ़ेस (यूआई) पर आसानी से नेविगेट कर सकते हैं.
:सक्रिय
बटन को दबाया गया है
जब कोई एलिमेंट चुना जा रहा हो, तब डाला जाता है. जैसे, जब कोई उपयोगकर्ता किसी एलिमेंट पर क्लिक कर रहा हो या उसे छू रहा हो.

खास टच इवेंट का रेफ़रंस यहां मिल सकता है: W3C टच इवेंट.

टच, माउस, और पॉइंटर इवेंट

ये इवेंट आपके ऐप्लिकेशन में नए जेस्चर जोड़ने के ज़रूरी हिस्सा हैं:

टच, माउस, पॉइंटर इवेंट
touchstart, mousedown, pointerdown इसे तब कहा जाता है, जब उपयोगकर्ता किसी एलिमेंट को पहली बार छूता है या जब उपयोगकर्ता माउस पर क्लिक करता है.
touchmove, mousemove, pointermove इसे तब कहा जाता है, जब उपयोगकर्ता अपनी उंगली को स्क्रीन पर एक जगह से दूसरी जगह ले जाता है या माउस के साथ खींचें और छोड़ें.
touchend, mouseup, pointerup इसे तब कहा जाता है, जब उपयोगकर्ता स्क्रीन से अपनी उंगली हटाता है या माउस छोड़ देता है.
touchcancel pointercancel इसे तब कॉल किया जाता है, जब ब्राउज़र टच जेस्चर को रद्द कर देता है. उदाहरण के लिए, कोई उपयोगकर्ता किसी वेब ऐप्लिकेशन को टच करता है और फिर टैब बदल देता है.

टच सूचियां

हर टच इवेंट में, सूची के तीन एट्रिब्यूट शामिल होते हैं:

टच इवेंट की विशेषताएं
touches स्क्रीन पर किए गए सभी मौजूदा टच की सूची, चाहे एलिमेंट छूए गए हों.
targetTouches मौजूदा इवेंट के टारगेट एलिमेंट पर शुरू हुए टच की सूची. उदाहरण के लिए, अगर आप किसी <button> से बाइंड करते हैं, तो आपको सिर्फ़ उस बटन के लिए टच मिलेंगे. अगर आप दस्तावेज़ से बाइंड करते हैं, तो आपको दस्तावेज़ पर मौजूद सभी चीज़ें मिल जाएंगी.
changedTouches उन टच की सूची जिनमें बदलाव होने की वजह से इवेंट ट्रिगर हुआ:
  • touchstart इवेंट के लिए-- उन टच पॉइंट की सूची जो अभी-अभी मौजूदा इवेंट के साथ चालू हुए.
  • touchmove इवेंट के लिए-- पिछले इवेंट के बाद से चले गए टच पॉइंट की सूची.
  • touchend और touchcancel इवेंट के लिए-- उन टच पॉइंट की सूची जिन्हें अभी-अभी सतह से हटाया गया है.

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);
    }
  }
};