CSS'deki touch-actionözellik, pointer-eventsfare etkileşimlerini kontrol etmek için daha yaygın olarak kullanılan özelliğe benzer şekilde, bir öğeyle dokunmatik ekran etkileşimlerinin etkisi üzerinde kontrol sağlar.
#element ( touch-action: pan-right pinch-zoom; )Bu touch-actionözellik, öncelikle kullanılan aygıtın türüne bağlı olarak biraz farklı davranışa ihtiyaç duyan etkileşimli UI öğeleri için kullanışlıdır. Kullanıcılarınız, bir öğenin bir fareyle belirli bir şekilde davranmasını beklediklerinde ve dokunmatik ekranda biraz farklı bir davranışta bulunulduğunda touch-actionkullanışlı olacaktır.
Bunun en bariz örneği etkileşimli bir harita öğesidir. Dokunmatik cihazlarla çalışmak üzere tasarlanmamış bir haritayı daha önce görüntülediyseniz, muhtemelen yalnızca öğeyi büyüten tarayıcıyı bulmak için kıstırıp yakınlaştırmayı denemişsinizdir, ancak gerçek haritayı yakınlaştırmamışsınızdır.
Varsayılan olarak, bir tarayıcı otomatik dokunmatik etkileşimleri idare edecek: vb Ayar, kaydırma için, yakınlaştırmak için tokatlamak çimdik touch-actioniçin nonebu olayların ele tüm tarayıcı devre dışı bırakır, (JavaScript aracılığıyla) uygulamaya bunları size bırakıyorum. Yalnızca bir etkileşimi devralmak istiyorsanız, tarayıcıya gerisini halletmesini söyleyin. Yalnızca kolları yakınlaştırma bazı JavaScript yazdı Örneğin, bu özelliği ile başka kolu her şeyi tarayıcı söyleyebilir: touch-action: pan-x pan-y;.
CodePen'de CSS-Tricks (@ css-tricks) tarafından dokunma eyleminin Kalem örneklerine bakın.
Sözdizimi
touch-action: auto | none | ( ( pan-x | pan-left | pan-right ) || ( pan-y | pan-up | pan-down ) || pinch-zoom ) | manipulationDeğerler
touch-actionÖzellik aşağıdaki değerleri kabul eder:
auto: Tarayıcının tüm kaydırma ve yakınlaştırma etkileşimlerini işlemesine izin verir.none: Tarayıcıların tüm kaydırma ve yakınlaştırma etkileşimlerini işlemesini devre dışı bırakır. Bu, JavaScript'te bu etkileşimleri özel olarak tanımlama yeteneğini açar.pan-x: Tek parmak etkileşimiyle yatay kaydırmayı etkinleştirir. Bu ifadesinin kısaltmasıdırpan-leftvepan-rightdeğerler, ancak kombinasyon halinde kullanılabilirpan-y,pan-up,pan-downvepinch-zoom.pan-yTek parmak etkileşimiyle dikey kaydırmayı etkinleştirir. Bu ifadesinin kısaltmasıdırpan-upvepan-downdeğerler, ancak kombinasyon halinde kullanılabilirpan-x,pan-left,pan-rightvepinch-zoom.manipulation: Kıstırma ve yakınlaştırma etkileşimlerini etkinleştirir, ancak yakınlaştırmak için çift dokunma gibi bazı cihazlarda bulabileceğiniz diğerlerini devre dışı bırakır. Kombinasyonunun kısaltmasıdırpan-x pan-y pinch-zoom.pan-left(Deneysel): Bir kullanıcının parmağı sola doğru kayan sağa hareket ettiğinde tek parmakla etkileşimi etkinleştirir.pan-right(Deneysel): Bir kullanıcının parmağı sola doğru hareket ettiğinde tek parmakla etkileşimi etkinleştirir, bu da sağa doğru kaydırma yapar.pan-down(Deneysel): Bir kullanıcının parmağı yukarı doğru hareket ettiğinde tek parmakla etkileşimi etkinleştirir, bu da aşağı doğru kaydırma yapar.pan-up(Deneysel): Bir kullanıcının parmağı aşağı doğru hareket ettiğinde tek parmakla etkileşimi etkinleştirir, bu da yukarı kaydırır.pinch-zoom: Çoklu parmak etkileşimlerini etkinleştirir ve başka herhangi birpan-değerle birleştirilebilir .
İlişkili
pointer-events
Tarayıcı Desteği
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
| Krom | Firefox | IE | Kenar | Safari |
|---|---|---|---|---|
| 36 | 52 | 10 * | 12 | Hayır |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 13.0-13.1 |
Safari, dokunma eylemi desteğinin göze çarpan ihmalidir. iOs Safari, yalnızca autove manipulationdeğerleri için sınırlı desteğe sahiptir .
ek bilgi
- İşaretçi Olayları Seviye 2 Spesifikasyonu - Spesifikasyon şu anda Aday Öneride yer almaktadır ancak bu yazı itibariyle 2019'un başlarında Önerilen Öneriye geçmesi amaçlanmıştır. Amaç, belgenin resmi bir W3C Tavsiyesi haline gelmesidir.
- MDN Belgeleri
- Dokunma eylemi sıkıştırma-yakınlaştırma CSS özelliği Örneği - Google Chrome'un uygulama demosu.
- WebKit Bugzilla Bilet # 133112 - Safari desteği önermek için bilet açın. Arttırmak için oyunuzu ekleyin.