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

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

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

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

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

.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 का इस्तेमाल करने वाले डेवलपर को लागू नहीं करना पड़ता.