Αφής-δράση - CSS-Κόλπα

Anonim

Η touch-actionιδιότητα στο CSS σάς δίνει τον έλεγχο της επίδρασης των αλληλεπιδράσεων οθόνης αφής με ένα στοιχείο, παρόμοιο με την ευρύτερα χρησιμοποιούμενη pointer-eventsιδιότητα που χρησιμοποιείται για τον έλεγχο των αλληλεπιδράσεων του ποντικιού.

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

Η touch-actionιδιότητα είναι χρήσιμη κυρίως για διαδραστικά στοιχεία διεπαφής χρήστη που χρειάζονται ελαφρώς διαφορετική συμπεριφορά ανάλογα με τον τύπο της συσκευής που χρησιμοποιείται. Όταν οι χρήστες σας ενδέχεται να περιμένουν ένα στοιχείο να συμπεριφέρεται με ένα συγκεκριμένο ποντίκι και μια ελαφρώς διαφορετική συμπεριφορά σε μια οθόνη αφής, touch-actionθα είναι χρήσιμο.

Το πιο προφανές παράδειγμα αυτού είναι ένα διαδραστικό στοιχείο χάρτη. Εάν έχετε δει ποτέ έναν χάρτη που δεν έχει σχεδιαστεί για να λειτουργεί με συσκευές αφής, πιθανότατα έχετε προσπαθήσει να τσιμπήσετε και να κάνετε ζουμ μόνο για να βρείτε το πρόγραμμα περιήγησης που μεγεθύνει το στοιχείο, αλλά δεν κάνετε πραγματικό ζουμ στον πραγματικό χάρτη.

Από προεπιλογή, το πρόγραμμα περιήγησης θα χειριστεί τις αλληλεπιδράσεις αφής αυτόματα: Pinch σε μεγέθυνση, σύρετε για να μετακινηθείτε, κλπ Ρύθμιση touch-actionγια noneνα απενεργοποιήσετε όλες τις χειρισμό αυτών των εκδηλώσεων του προγράμματος περιήγησης, αφήνοντας τους μέχρι να εφαρμόσει (μέσω JavaScript). Εάν θέλετε να αναλάβετε μόνο μια αλληλεπίδραση, πείτε στο πρόγραμμα περιήγησης να χειριστεί τα υπόλοιπα. Για παράδειγμα, αν έχετε γράψει κάποιο Javascript για ότι μόνο λαβές ζουμ, μπορείτε να πείτε το πρόγραμμα περιήγησης στο χερούλι ό, τι άλλο με αυτήν την ιδιότητα: touch-action: pan-x pan-y;.

Δείτε τα παραδείγματα στυλό της δράσης αφής από CSS-Tricks (@ css-tricks) στο CodePen.

Σύνταξη

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

Αξίες

Η touch-actionιδιότητα δέχεται τις ακόλουθες τιμές:

  • auto: Επιτρέπει στο πρόγραμμα περιήγησης να χειρίζεται όλες τις αλληλεπιδράσεις μετακίνησης και ζουμ.
  • none: Απενεργοποιεί τα προγράμματα περιήγησης από το χειρισμό όλων των αλληλεπιδράσεων pan και zoom. Αυτό ανοίγει τη δυνατότητα προσαρμογής των αλληλεπιδράσεων σε JavaScript.
  • 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, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.

Επιφάνεια εργασίας

Χρώμιο Firefox ΙΕ Ακρη Σαφάρι
36 52 10 * 12 Οχι

Κινητό / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 13.0-13.1

Το Safari είναι η έντονη παράλειψη στην υποστήριξη αφής. Το iOs Safari έχει περιορισμένη υποστήριξη, μόνο για τις τιμές autoκαι manipulation.

Επιπλέον πληροφορίες

  • Pointer Events Level 2 Specification - Η προδιαγραφή βρίσκεται επί του παρόντος στη Σύσταση υποψηφίων, αλλά προορίζεται να μεταφερθεί στην Προτεινόμενη Σύσταση στις αρχές του 2019, από αυτήν τη συγγραφή. Η πρόθεση είναι ότι το έγγραφο θα γίνει επίσημη Σύσταση του W3C.
  • Τεκμηρίωση MDN
  • Δείγμα ιδιοτήτων Touch-action pinch-zoom CSS - Επίδειξη του Google Chrome για την εφαρμογή του
  • Εισιτήριο WebKit Bugzilla # 133112 - Ανοίξτε το εισιτήριο για να προτείνετε υποστήριξη Safari. Προσθέστε την ψήφο σας για να την ανεβάσετε.