स्पर्श-क्रिया - सीएसएस-ट्रिक्स

touch-actionसीएसएस में संपत्ति आप एक तत्व है, और अधिक व्यापक रूप से इस्तेमाल के लिए इसी तरह के साथ टचस्क्रीन इंटरैक्शन के प्रभाव पर नियंत्रण देता है pointer-eventsनियंत्रण माउस बातचीत करने के लिए इस्तेमाल संपत्ति।

#element ( touch-action: pan-right pinch-zoom; )

यह touch-actionप्रॉपर्टी मुख्य रूप से इंटरेक्टिव यूआई तत्वों के लिए उपयोगी है, जिन्हें उपयोग किए जा रहे डिवाइस के प्रकार के आधार पर थोड़ा अलग व्यवहार की आवश्यकता होती है। जब आपके उपयोगकर्ता एक माउस के साथ एक विशेष तरीके से व्यवहार करने के लिए एक तत्व की उम्मीद कर सकते हैं, और एक टच स्क्रीन पर थोड़ा अलग व्यवहार, touch-actionकाम में आएगा।

इसका सबसे स्पष्ट उदाहरण एक इंटरेक्टिव मानचित्र तत्व है। यदि आपने कभी ऐसा नक्शा देखा है जिसे स्पर्श उपकरणों के साथ काम करने के लिए डिज़ाइन नहीं किया गया है, तो आपने संभवतः तत्व को बढ़ाने वाले ब्राउज़र को खोजने के लिए केवल चुटकी और ज़ूम करने की कोशिश की है, लेकिन वास्तव में वास्तविक नक्शे को ज़ूम नहीं कर रहा है।

डिफ़ॉल्ट रूप से, एक ब्राउज़र स्वचालित रूप से स्पर्श इंटरैक्शन को संभाल लेगा: चुटकी ज़ूम करने के लिए, स्क्रॉल करने के लिए स्वाइप करें आदि । इन घटनाओं के सभी ब्राउज़र हैंडलिंग को अक्षम touch-actionकरने के लिए सेटिंग none, उन्हें लागू करने के लिए आपको छोड़कर (जावास्क्रिप्ट के माध्यम से)। यदि आप केवल एक इंटरैक्शन लेना चाहते हैं, तो ब्राउज़र को बाकी को संभालने के लिए कहें। उदाहरण के लिए, यदि आपने कुछ जावास्क्रिप्ट लिखी है जो केवल ज़ूमिंग को संभालती है, तो आप ब्राउज़र को इस संपत्ति के साथ बाकी सब को संभालने के लिए कह सकते हैं touch-action: pan-x pan-y;:।

CodePen पर CSS-Tricks (@ css-tricks) द्वारा स्पर्श-क्रिया के पेन उदाहरण देखें।

वाक्य - विन्यास

touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulation

मूल्यों

touch-actionसंपत्ति निम्न मान स्वीकार करता है:

auto: ब्राउज़र को सभी पैन और ज़ूम इंटरैक्शन को संभालने की अनुमति देता है।
none: सभी पैन और ज़ूम इंटरैक्शन को संभालने से ब्राउज़र को अक्षम करता है। यह जावास्क्रिप्ट में उन इंटरैक्शन को कस्टम परिभाषित करने की क्षमता को खोलता है।
pan-x: एक एकल उंगली बातचीत के साथ क्षैतिज पैनिंग को सक्षम करता है। यह के लिए आशुलिपि है pan-leftऔर pan-rightमूल्यों, लेकिन साथ संयोजन में उपयोग किया जा सकता है pan-y, pan-up, pan-downऔर pinch-zoom।
pan-yएक एकल उंगली बातचीत के साथ ऊर्ध्वाधर पैनिंग को सक्षम करता है। यह के लिए आशुलिपि है pan-upऔर pan-downमूल्यों, लेकिन साथ संयोजन में उपयोग किया जा सकता है pan-x, pan-left, pan-rightऔर pinch-zoom।
manipulation: चुटकी और ज़ूम इंटरैक्शन को सक्षम करता है, लेकिन दूसरों को अक्षम करता है जो आपको कुछ उपकरणों पर मिल सकते हैं, जैसे ज़ूम करने के लिए डबल-टैप करें। के संयोजन के लिए यह आशुलिपि है pan-x pan-y pinch-zoom।
pan-left (प्रायोगिक): उपयोगकर्ता की उंगली दाईं ओर बढ़ने पर एकल उंगली इंटरैक्शन को सक्षम करता है, जो बाईं ओर पैन करता है।
pan-right (प्रायोगिक): एक उंगली की बातचीत को सक्षम करता है जब उपयोगकर्ता की उंगली बाईं ओर चलती है, जो दाईं ओर जाती है।
pan-down (प्रायोगिक): किसी उपयोगकर्ता की उंगली ऊपर जाने पर एकल उंगली अंतःक्रिया को सक्षम करता है, जो नीचे की ओर बढ़ता है।
pan-up (प्रायोगिक): उपयोगकर्ता की उंगली नीचे जाने पर एकल उंगली की बातचीत को सक्षम करता है, जो ऊपर की ओर बढ़ता है।
pinch-zoom: मल्टी-फिंगर इंटरैक्शन को सक्षम करता है और किसी भी अन्य pan-मूल्य के साथ जोड़ा जा सकता है ।

सम्बंधित

pointer-events

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
३६	५२	10 *	१२	नहीं न

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	81	13.0-13.1

सफारी टच-एक्शन सपोर्ट की शानदार झलक है। आईओएस सफारी को सीमित समर्थन है, केवल autoऔर manipulationमूल्यों के लिए।

अतिरिक्त जानकारी

सूचक ईवेंट स्तर 2 की विशिष्टता - कैंडिडेट की अनुशंसा में वर्तमान में युक्ति है, लेकिन इस लेखन के अनुसार, 2019 की शुरुआत में प्रस्तावित सिफारिश पर जाने का इरादा है। आशय यह है कि दस्तावेज़ एक आधिकारिक W3C अनुशंसा बन जाएगा।
MDN प्रलेखन
टच-एक्शन चुटकी-ज़ूम सीएसएस संपत्ति नमूना - Google क्रोम इसके कार्यान्वयन का डेमो।
WebKit Bugzilla टिकट # 133112 - सफारी समर्थन का प्रस्ताव करने के लिए खुला टिकट। इसे जोड़ने के लिए अपना वोट डालें।