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

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 का इस्तेमाल करते हैं, तो उसे लागू करना होगा.