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

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

Chrome के 55 वर्शन से पहले, 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 का इस्तेमाल करके, लॉजिक को लागू करना पड़ता.