خيارات إجراءات اللمس

مات غاونت

Twitter الصفحة الرئيسية

تسمح سمة touch-action في CSS للمطوّر بتقييد كيفية تفاعل المستخدم مع عنصر، وهو أمر مفيد بشكل خاص لمنع إرسال الأحداث عندما لا يكون ذلك ضروريًا.

قبل الإصدار 55، كان Chrome يعتمد الترميزَين pan-x وpan-y اللذَين يحصران تمرير العناصر في اتجاه واحد.

يُظهر الفيديو أدناه مثالاً لعنصر بدون تحديد إجراء لمس (يسار)، بالإضافة إلى pan-x وpan-y (في الوسط واليمين).

تمثّل لغة CSS في تسجيلات الشاشة اليمنى والوسطى ما يلي:

.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 التي تتطلب إيماءات للبدء من اليمين إلى اليسار ومن أسفل إلى أعلى على التوالي. بمجرد أن تبدأ الإيماءة، يمكنك بالفعل التحريك ذهابًا وإيابًا. التأثير هو الاتجاه الأولي فقط.

مع أنّ الفيديو يشرح هذا السلوك، قد يكون من الأسهل عليك تجربة الاطّلاع على العيّنة من خلال هذا الفيديو.

لغة CSS لهذا العرض التوضيحي هي:

.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 إلى تنفيذه.