टच ऐक्शन के विकल्प

touch-action सीएसएस प्रॉपर्टी की मदद से, डेवलपर यह तय कर सकता है कि उपयोगकर्ता किसी एलिमेंट के साथ कैसे इंटरैक्ट कर सकता है. ऐसा खास तौर पर, ज़रूरी न होने पर इवेंट को भेजे जाने से रोकने में मदद करने के लिए किया जाता है.

वर्शन 55 से पहले, Chrome pan-x और pan-y के साथ काम करता था. इन वर्शन में एलिमेंट को एक ही दिशा में स्क्रोल करने पर पाबंदी लगाई जाती थी.

नीचे दिए गए वीडियो में, टच-ऐक्शन के बिना एलिमेंट का उदाहरण दिखाया गया है (बाईं ओर). साथ ही, पैन-x और पैन-y (बीच और दाईं ओर) का उदाहरण भी दिखाया गया है.

बीच और दाएं हाथ के स्क्रीन-कास्ट के लिए सीएसएस:

.pan-x {
    touch-action: pan-x;
}

.pan-y {
    touch-action: pan-y;
}

Chrome 55 में, pan-left, pan-right, pan-up, और pan-down को जोड़ा गया. इन प्रॉपर्टी के काम करने के तरीके में ज़रूरी अंतर होता है.

ये प्रॉपर्टी, एलिमेंट के जवाब देने से पहले, उपयोगकर्ता को एक दिशा में जेस्चर शुरू करने के लिए मजबूर करती हैं. यह "पुल-टू-रिफ़्रेश" जेस्चर जैसा ही है, जो सिर्फ़ तब काम करता है, जब उपयोगकर्ता स्क्रीन पर नीचे की ओर जेस्चर करता है.

इस वीडियो में pan-right और pan-down के बारे में बताया गया है. इनके लिए, जेस्चर को दाईं से बाईं ओर और नीचे से ऊपर की ओर शुरू करना ज़रूरी है. जेस्चर शुरू होने के बाद, स्क्रीन पर आगे-पीछे पैन किया जा सकता है. इसका असर सिर्फ़ शुरुआती दिशा पर पड़ता है.

इस वीडियो में इस सुविधा के बारे में बताया गया है. हालांकि, इसे खुद आज़माने के लिए, सैंपल देखें.

इस डेमो के लिए सीएसएस यह है:

.pan-right {
    touch-action: pan-right;
}

.pan-down {
    touch-action: pan-down;
}

टच-ऐक्शन की दुनिया में आखिरी चीज़ pinch-zoom प्रॉपर्टी है. यह Chrome 55 में एक नई प्रॉपर्टी है, जो एक फ़्लैग के पीछे है. इसे किसी भी पैन विकल्प (जैसे कि pan-x, pan-y, pan-left, pan-right, pan-down, pan-up) के साथ इस्तेमाल किया जा सकता है.

किसी वेबसाइट पर पिंच करने पर, आम तौर पर पेज के कॉन्टेंट पर ज़ूम इन हो जाता है. touch-action तय करने से यह व्यवहार रुक जाएगा. हालांकि, पिंच-ज़ूम करने की सुविधा जोड़ने पर, यह व्यवहार फिर से चालू हो जाएगा.

इस वीडियो में touch-action: pan-x और touch-action: pan-x pinch-zoom के बीच का अंतर दिखाया गया है;

इन सभी प्रॉपर्टी से, कुछ लॉजिक को आसान बनाना चाहिए. अगर ऐसा नहीं होता, तो डेवलपर को pointer-events का इस्तेमाल करके, लॉजिक को लागू करना पड़ता.