ความคิดเห็น: การโต้ตอบส่วนใหญ่บนโทรศัพท์มือถือทำได้ผ่านการสัมผัสดังนั้นสำหรับเว็บไซต์แบบอินเทอร์แอคทีฟหน้าจอสัมผัสเหตุการณ์การสัมผัสมีความสำคัญมาก ที่นี่เราแนะนำกิจกรรมสัมผัสหลายอย่างที่ได้รับความนิยมมากขึ้น คุณสามารถทดสอบเหตุการณ์นี้ในเบราว์เซอร์ที่ทันสมัยที่สุด เพื่อนที่สนใจสามารถเรียนรู้ได้
คำนำเว็บไซต์หน้าจอสัมผัสและเว็บไซต์พีซีแบบดั้งเดิมแตกต่างกันอย่างไร การเปลี่ยนแปลงวิธีการโต้ตอบเป็นครั้งแรกที่ได้รับผลกระทบ ตัวอย่างเช่นเหตุการณ์การคลิกที่เรามักจะใช้นั้นไม่มีพลังภายใต้อุปกรณ์หน้าจอสัมผัส
การโต้ตอบส่วนใหญ่บนโทรศัพท์มือถือทำได้ผ่านการสัมผัสดังนั้นเหตุการณ์การสัมผัสจึงสำคัญมากสำหรับเว็บไซต์แบบโต้ตอบที่มีหน้าจอสัมผัส
Apple แนะนำ API Touch Event ใน iOS 2.0 และ Android กำลังตามมาตรฐานข้อเท็จจริงนี้เพื่อ จำกัด ช่องว่าง เมื่อเร็ว ๆ นี้คณะทำงาน W3C กำลังทำงานร่วมกันเพื่อกำหนดบรรทัดฐานเหตุการณ์สัมผัสนี้
ข้อมูลจำเพาะ
ที่นี่เราแนะนำกิจกรรมสัมผัสหลายอย่างที่ได้รับความนิยมมากขึ้น คุณสามารถทดสอบเหตุการณ์นี้ในเบราว์เซอร์ที่ทันสมัยที่สุด (ต้องเป็นอุปกรณ์หน้าจอสัมผัส):
TouchStart: ทริกเกอร์เมื่อการสัมผัสเริ่มต้นขึ้น
TouchMove: ทริกเกอร์เมื่อนิ้วเลื่อนบนหน้าจอ
touchend: ทริกเกอร์เมื่อสัมผัสสิ้นสุดลง
แต่ละเหตุการณ์สัมผัสประกอบด้วยรายการสัมผัสสามรายการแต่ละรายการมีชุดแตะชุดที่สอดคล้องกัน (ใช้เพื่อใช้มัลติทัช):
สัมผัส: รายการนิ้วทั้งหมดที่อยู่บนหน้าจอในปัจจุบัน
TargetTouches: รายการนิ้วมือที่อยู่ในองค์ประกอบ DOM ปัจจุบัน
CHANGETOUCHES: รายการนิ้วมือที่เกี่ยวข้องกับเหตุการณ์ปัจจุบัน
แต่ละจุดสัมผัสมีข้อมูลการสัมผัสต่อไปนี้ (ใช้กันทั่วไป):
ตัวระบุ: ค่าที่ระบุนิ้วปัจจุบันในเซสชันการสัมผัสโดยไม่ซ้ำกัน โดยทั่วไปหมายเลขการไหลเริ่มต้นจาก 0 (Android4.1, UC)
เป้าหมาย: องค์ประกอบ DOM เป็นเป้าหมายที่กำหนดเป้าหมายโดยการกระทำ
pagex/pagex/clientx/clienty/screenx/screeny: ค่าที่การกระทำเกิดขึ้นบนหน้าจอ (หน้ามีระยะสกรอลล์, ไคลเอนต์ไม่มีระยะสกรอลล์, หน้าจอขึ้นอยู่กับหน้าจอ)
RADIUSX/RADIUSY/ROTATIONANGLE: วาดวงรีโดยประมาณเทียบเท่ากับรูปร่างของนิ้ว, สองรัศมีและมุมการหมุนของวงรีตามลำดับ เบราว์เซอร์ทดสอบเบื้องต้นไม่รองรับ แต่โชคดีที่ฟังก์ชั่นไม่ได้ใช้กันทั่วไปดังนั้นทุกคนจึงยินดีรับข้อเสนอแนะ
ด้วยข้อมูลนี้เราสามารถให้ข้อเสนอแนะที่แตกต่างกันตามข้อมูลเหตุการณ์เหล่านี้
ด้านล่างนี้ฉันจะแสดงตัวอย่างเล็ก ๆ การลากนิ้วเดี่ยวโดยใช้ TouchMove:
/*ลากด้วยนิ้วเดียว*/
var obj = document.getElementById ('id');
obj.addeventListener ('touchmove', ฟังก์ชั่น (เหตุการณ์) {
// ถ้ามีเพียงนิ้วเดียวในตำแหน่งขององค์ประกอบนี้
if (event.targetTouches.length == 1) {
Event.preventDefault (); // บล็อกเหตุการณ์เริ่มต้นของเบราว์เซอร์ที่สำคัญ
var touch = event.targetTouches [0];
// ใส่องค์ประกอบที่นิ้วของคุณอยู่
obj.style.left = touch.pagex-50 + 'px';
obj.style.top = touch.pagey-50 + 'px';
-
}, เท็จ);
เคล็ดลับเกี่ยวกับคลาสหลอกสี่ชั้นของแท็กในอุปกรณ์หน้าจอสัมผัส:
เราทุกคนรู้ว่าคลาสหลอกทั้งสี่ของแท็กลิงค์เยี่ยมชมการใช้งานและโฮเวอร์ได้รับการออกแบบมาสำหรับกิจกรรมคลิกดังนั้นพยายามอย่าใช้พวกเขาในเว็บไซต์หน้าจอสัมผัส การทดสอบส่วนใหญ่ไม่สามารถใช้งานได้เช่นกัน แต่นี่เป็นเคล็ดลับเล็กน้อยเกี่ยวกับโฮเวอร์ เมื่อคุณคลิกปุ่มปุ่มจะยังคงอยู่ในสถานะโฮเวอร์ ในเวลานี้ CSS ที่คุณตั้งค่าตามระดับหลอกนี้ยังใช้งานได้จนกว่าคุณจะคลิกปุ่มอื่นด้วยนิ้วของคุณสถานะโฮเวอร์จะถูกถ่ายโอนไปยังปุ่มอื่น การใช้สิ่งนี้เราสามารถสร้างเอฟเฟกต์เล็กน้อย เคล็ดลับนี้ยังคงมีอยู่ในเบราว์เซอร์ส่วนใหญ่
อุดมคติเต็มความเป็นจริงผอม!
แม้ว่า W3C จะพร้อมสำหรับมัลติทัช แต่น่าเสียดายที่เบราว์เซอร์เพียงไม่กี่ตัวที่รองรับคุณสมบัติแบบมัลติทัชโดยเฉพาะเบราว์เซอร์บนแพลตฟอร์ม Android ซึ่งทำให้รายการนิ้วที่แนะนำข้างต้นกลายเป็นการพูดคุยที่ว่างเปล่า การจับจุดสัมผัสสองจุดจะนำไปสู่ความล้มเหลวของการสัมผัสโดยตรง! โชคดีที่เบราว์เซอร์ Safari ที่มาพร้อมกับอุปกรณ์ iOS สามารถรองรับคุณสมบัตินี้ซึ่งทำให้เราเต็มไปด้วยความหวังในอนาคต ท้ายที่สุดเราถูกจำคุกโดยการทำงานเพียงจุดเดียวของเมาส์นานเกินไป มันน่าตื่นเต้นแค่ไหนที่จะใช้เว็บไซต์มากขึ้น!