इस पेज का अनुवाद Cloud Translation API से किया गया है.

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

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

Matt Gaunt

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

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

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

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

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

इसे आज़माएँ

बटन की स्थितियों के लिए अलग-अलग रंग दिखाने वाली इमेज

ज़्यादातर मोबाइल ब्राउज़र पर, किसी एलिमेंट पर टैप करने के बाद, उस पर हॉवर और/या फ़ोकस स्टेटस लागू हो जाएगा.

ध्यान से चुनें कि आपको कौनसे स्टाइल सेट करने हैं और उपयोगकर्ता के टच करने के बाद, वे उसे कैसे दिखेंगे.

ब्राउज़र की डिफ़ॉल्ट स्टाइल को छिपाना

अलग-अलग स्टेटस के लिए स्टाइल जोड़ने के बाद, आपको पता चलेगा कि ज़्यादातर ब्राउज़र, उपयोगकर्ता के टच के जवाब में अपनी स्टाइल लागू करते हैं. ऐसा इसलिए है, क्योंकि जब मोबाइल डिवाइस पहली बार लॉन्च हुए थे, तब कई साइटों पर :active स्टेटस के लिए स्टाइल नहीं थी. इस वजह से, कई ब्राउज़र ने उपयोगकर्ता को सुझाव देने के लिए, हाइलाइट करने के लिए अतिरिक्त रंग या स्टाइल जोड़ा है.

ज़्यादातर ब्राउज़र, outline सीएसएस प्रॉपर्टी का इस्तेमाल करके, किसी एलिमेंट पर फ़ोकस होने पर उसके चारों ओर रिंग दिखाते हैं. इसे इन तरीकों से दबाया जा सकता है:

.btn:focus {
    outline: 0;

    /* Add replacement focus styling here (i.e. border) */
}

Safari और Chrome, टैप करने पर हाइलाइट करने के लिए रंग जोड़ते हैं. इसे -webkit-tap-highlight-color CSS प्रॉपर्टी की मदद से रोका जा सकता है:

/* Webkit / Chrome Specific CSS to remove tap
highlight color */
.btn {
  -webkit-tap-highlight-color: transparent;
}

इसे आज़माएँ

Windows फ़ोन पर 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;
}

इसे आज़माएँ

चेतावनी: ऊपर बताई गई डिफ़ॉल्ट स्टाइल को सिर्फ़ तब दबाएं, जब आपके पास :hover, :active, और :focus के लिए स्यूडो क्लास हों!

उपयोगकर्ता के चुने जाने की सुविधा बंद करना

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

ऐसा करने के लिए, user-select सीएसएस प्रॉपर्टी का इस्तेमाल किया जा सकता है. हालांकि, ध्यान रखें कि अगर उपयोगकर्ता एलिमेंट में मौजूद टेक्स्ट को चुनें, तो कॉन्टेंट पर ऐसा करने से उन्हें काफ़ी परेशानी हो सकती है. इसलिए, इसका इस्तेमाल सावधानी से और सावधानी से करें.

/* 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 लागू करने होंगे.

अगर आपको यह जानना है कि किन इवेंट का इस्तेमाल करना है, तो टच, माउस, और पॉइंटर इवेंट की यह टेबल देखें.

इन इवेंट का इस्तेमाल करने के लिए, किसी DOM एलिमेंट पर 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);
}

इसे आज़माएँ

ध्यान दें: एपीआई के डिज़ाइन की वजह से, PointerEvents को माउस और टच इवेंट, दोनों को हैंडल करने के लिए सिर्फ़ एक pointerdown इवेंट की ज़रूरत होती है.

एक एलिमेंट के इंटरैक्शन को मैनेज करना

ऊपर दिए गए छोटे कोड स्निपेट में, हमने माउस इवेंट के लिए सिर्फ़ स्टार्टिंग इवेंट लिसनर जोड़ा है. इसकी वजह यह है कि माउस इवेंट सिर्फ़ तब ट्रिगर होंगे, जब कर्सर उस एलिमेंट पर ओवर कर रहा होगा जिसमें इवेंट लिसनर जोड़ा गया है.

TouchEvents, शुरू होने के बाद जेस्चर को ट्रैक करेगा. भले ही, टच कहीं भी हुआ हो. साथ ही, PointerEvents, किसी DOM एलिमेंट पर setPointerCapture को कॉल करने के बाद, इवेंट को ट्रैक करेगा. भले ही, टच कहीं भी हुआ हो.

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

इसे लागू करने के लिए, ये कदम उठाए गए हैं:

सभी TouchEvent और PointerEvent लिसनर जोड़ें. MouseEvents के लिए, सिर्फ़ शुरू होने का इवेंट जोड़ें.
शुरू करने के जेस्चर कॉलबैक में, माउस मूव और खत्म होने के इवेंट को दस्तावेज़ से बांधें. इस तरह, सभी माउस इवेंट मिलते हैं. भले ही, इवेंट ओरिजनल एलिमेंट पर होता हो या नहीं. पॉइंटर इवेंट के लिए, हमें सभी और इवेंट पाने के लिए, अपने ओरिजनल एलिमेंट पर 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);

इसे आज़माएँ

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

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

`touchstart` में दस्तावेज़ से टच इवेंट को बांधने का उदाहरण

टच करने पर बेहतर तरीके से काम करना

अब हम टच इवेंट के जवाब दे सकते हैं, क्योंकि हमने शुरू और खत्म होने के इवेंट को मैनेज कर लिया है.

शुरू होने और किसी भी जगह पर जाने वाले इवेंट के लिए, किसी इवेंट से 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: स्क्रीन पर मौजूद सभी टच की सूची. भले ही, वे किसी भी डीओएम एलिमेंट पर हों.
targetTouches: उस डीओएम एलिमेंट पर मौजूद टच की सूची जिस पर इवेंट बंधा है.
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`	यह `pinch-zoom` के अलावा, सभी ब्राउज़र इंटरैक्शन को बंद कर देता है. हालांकि, `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		किसी एलिमेंट पर कर्सर ले जाने पर यह जानकारी दिखती है. कर्सर घुमाने पर यूज़र इंटरफ़ेस (यूआई) में होने वाले बदलाव, उपयोगकर्ताओं को एलिमेंट के साथ इंटरैक्ट करने के लिए बढ़ावा देते हैं.
:focus		यह तब ट्रिगर होता है, जब उपयोगकर्ता किसी पेज पर मौजूद एलिमेंट पर टैब करता है. फ़ोकस की स्थिति से, उपयोगकर्ता को यह पता चलता है कि फ़िलहाल वह किस एलिमेंट के साथ इंटरैक्ट कर रहा है. साथ ही, इससे उपयोगकर्ताओं को कीबोर्ड का इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) पर आसानी से नेविगेट करने में मदद मिलती है.
:active		किसी एलिमेंट को चुनने पर डाला जाता है. उदाहरण के लिए, जब कोई उपयोगकर्ता किसी एलिमेंट पर क्लिक या टच कर रहा हो.

टच इवेंट का पूरा रेफ़रंस यहां दिया गया है: 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 डिवाइसों पर चले.

मुख्य हिस्से में टच स्टार्ट जोड़ने का तरीका, डीओएम में सभी एलिमेंट पर लागू करने का फ़ायदा है. हालांकि, पेज को स्क्रोल करते समय, परफ़ॉर्मेंस से जुड़ी समस्याएं हो सकती हैं.

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