บทความนี้ส่วนใหญ่แนะนำการรวบรวมเหตุการณ์การสัมผัสทั่วไปที่พัฒนาโดย HTML5 Mobile Terminal วัตถุเหตุการณ์ของเหตุการณ์การสัมผัสนั้นสอดคล้องกับแอตทริบิวต์ของการทำงานของเมาส์ เพื่อนที่ต้องการมันสามารถอ้างถึงมันได้
มีการเพิ่มเหตุการณ์ใหม่จำนวนมากใน HTML5 แต่เนื่องจากปัญหาความเข้ากันได้ของพวกเขาไม่เหมาะและแอปพลิเคชันของพวกเขาไม่ได้ใช้งานได้จริง เราแบ่งปันกิจกรรมที่เข้ากันได้ดีกับแอปพลิเคชันที่กว้าง เราจะเพิ่มและแบ่งปันให้พวกเขาอีกครั้งเนื่องจากสถานการณ์ความเข้ากันได้ดีขึ้นในอนาคต เหตุการณ์ที่ฉันจะแนะนำให้คุณรู้จักในวันนี้เป็นกิจกรรมสัมผัสเป็นหลัก: TouchStart, TouchMove และ Touchend
ในตอนแรก Touch Events TouchStart, TouchMove และ Touchend เป็นกิจกรรมที่เพิ่มเข้ามาใหม่สำหรับเบราว์เซอร์ Safari เวอร์ชัน iOS เพื่อถ่ายทอดข้อมูลบางอย่างไปยังนักพัฒนา เนื่องจากอุปกรณ์ iOS ไม่มีเมาส์หรือแป้นพิมพ์เมื่อพัฒนาหน้าเว็บแบบโต้ตอบสำหรับเบราว์เซอร์ Safari มือถือเมาส์และคีย์บอร์ดกิจกรรมบนพีซีไม่เพียงพอ
เมื่อ iPhone 3GS ออกวางจำหน่ายเบราว์เซอร์ Safari มือถือของตัวเองให้กิจกรรมใหม่ที่เกี่ยวข้องกับการดำเนินการสัมผัส เหตุการณ์เดียวกันนี้ถูกนำไปใช้โดยเบราว์เซอร์บน Android เหตุการณ์การสัมผัสจะเริ่มต้นเมื่อผู้ใช้วางนิ้วของเขาบนหน้าจอเมื่อเลื่อนบนหน้าจอหรือเมื่อย้ายออกจากหน้าจอ มีการอธิบายรายละเอียดต่อไปนี้:
เหตุการณ์ TouchStart: ทริกเกอร์เมื่อนิ้วสัมผัสหน้าจอมันจะทริกเกอร์แม้ว่านิ้วเดียวจะถูกวางไว้บนหน้าจอแล้ว
เหตุการณ์ TouchMove: ทริกเกอร์อย่างต่อเนื่องเมื่อนิ้วเลื่อนบนหน้าจอ ในระหว่างเหตุการณ์นี้เหตุการณ์การโทร PreventDefault () สามารถป้องกันการเลื่อน
เหตุการณ์ touchend: ทริกเกอร์เมื่อนิ้วออกจากหน้าจอ
เหตุการณ์ TouchCancel: ทริกเกอร์เมื่อระบบหยุดการติดตาม Touch เอกสารไม่ได้ระบุเวลาออกเดินทางที่แน่นอนของเหตุการณ์นี้ดังนั้นเราจึงสามารถเดาได้
เหตุการณ์ทั้งหมดข้างต้นจะเดือดและสามารถยกเลิกได้ แม้ว่าเหตุการณ์การสัมผัสเหล่านี้จะไม่ได้กำหนดไว้ในข้อกำหนด DOM แต่ก็จะถูกนำไปใช้ในลักษณะที่เข้ากันได้กับ DOM ดังนั้นแต่ละวัตถุเหตุการณ์การสัมผัสจะให้คุณลักษณะทั่วไปในการฝึกเมาส์: ฟองสบู่ (ประเภทของเหตุการณ์ฟอง), ยกเลิกได้ (ไม่ว่าจะเป็นการกระทำเริ่มต้นที่เกี่ยวข้องกับเหตุการณ์สามารถยกเลิกได้ด้วยวิธี preventDefault ()), clientX พิกัดแนวนอนของตัวชี้เมาส์เมื่อเหตุการณ์ถูกเรียกใช้) และหน้าจอ (ส่งคืนพิกัดแนวตั้งของตัวชี้เมาส์เมื่อเหตุการณ์ถูกเรียกใช้) นอกเหนือจากคุณสมบัติ DOM ทั่วไปเหตุการณ์สัมผัสยังมีแอตทริบิวต์สามตัวต่อไปนี้สำหรับการติดตามการสัมผัส
สัมผัส: อาร์เรย์ของวัตถุสัมผัสที่แสดงถึงการดำเนินการสัมผัสที่ติดตามในปัจจุบัน
TargetTouches: อาร์เรย์ของวัตถุสัมผัสที่เฉพาะเจาะจงกับเป้าหมายเหตุการณ์
Changetouches: อาร์เรย์ของวัตถุสัมผัสที่แสดงถึงสิ่งที่เปลี่ยนแปลงไปตั้งแต่การสัมผัสครั้งสุดท้าย
แต่ละวัตถุสัมผัสมีคุณสมบัติต่อไปนี้
clientx: แตะที่พิกัด X ของเป้าหมายในวิวพอร์ต
ลูกค้า: แตะที่พิกัด Y ของเป้าหมายใน Viewport
ตัวระบุ: ID ที่ไม่ซ้ำกันที่ระบุการสัมผัส
PAGEX: แตะพิกัด X ของเป้าหมายในหน้า
Pagey: แตะพิกัด Y ของเป้าหมายในหน้า
ScreenX: แตะที่พิกัด X ของเป้าหมายในหน้าจอ
Screeny: แตะพิกัด Y ของเป้าหมายในหน้าจอ
เป้าหมาย: การสัมผัสเป้าหมายของโหนด DOM
แต่ละจุดสัมผัสมีข้อมูลการสัมผัสต่อไปนี้ (ใช้กันทั่วไป):
ตัวระบุ: ค่าที่ระบุนิ้วปัจจุบันในเซสชันการสัมผัสโดยไม่ซ้ำกัน โดยทั่วไปหมายเลขการไหลเริ่มต้นจาก 0 (Android4.1, UC)
เป้าหมาย: องค์ประกอบ DOM เป็นเป้าหมายที่กำหนดเป้าหมายโดยการกระทำ
pagex/pagex/clientx/clienty/screenx/screeny: ค่าที่การกระทำเกิดขึ้นบนหน้าจอ (หน้ามีระยะสกรอลล์, ไคลเอนต์ไม่มีระยะสกรอลล์, หน้าจอขึ้นอยู่กับหน้าจอ)
RADIUSX/RADIUSY/ROTATIONANGLE: วาดวงรีโดยประมาณเทียบเท่ากับรูปร่างของนิ้ว, สองรัศมีและมุมการหมุนของวงรีตามลำดับ เบราว์เซอร์ทดสอบเบื้องต้นไม่รองรับ แต่โชคดีที่ฟังก์ชั่นไม่ได้ใช้กันทั่วไปดังนั้นทุกคนจึงยินดีรับข้อเสนอแนะ
ตัวอย่างเล็ก ๆ ของการดำเนินการ JavaScript:
JavaScript รหัสคัดลอกเนื้อหาไปยังคลิปบอร์ด