ตัวเลือกการทำงานด้วยการสัมผัส

พร็อพเพอร์ตี้ CSS ของ touch-action ช่วยให้นักพัฒนาซอฟต์แวร์จำกัดการโต้ตอบของผู้ใช้กับองค์ประกอบได้ ซึ่งมีประโยชน์อย่างยิ่งในการป้องกันการส่งเหตุการณ์เมื่อไม่จำเป็น

รุ่นก่อนหน้า 55 Chrome รองรับ pan-x และ pan-y ซึ่งจำกัดให้องค์ประกอบเลื่อนในทิศทางเดียวได้

วิดีโอด้านล่างแสดงตัวอย่างองค์ประกอบที่ไม่มีการกำหนดการทำงานด้วยการสัมผัส (ซ้าย) รวมถึง Pan-x และ Pan-y (ตรงกลางและขวา)

CSS สำหรับ Screencast กลางและขวามือมีลักษณะดังนี้

.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 ในการนำมาใช้งาน