บทความนี้อธิบายเหตุการณ์ JavaScript ในหน้าจอสัมผัส แบ่งปันสำหรับการอ้างอิงของคุณ การวิเคราะห์เฉพาะมีดังนี้:
1. สัมผัสเหตุการณ์
ontouchstart
Ontouchmove
Ontouchend
ปัจจุบัน OntouchCancel รองรับกิจกรรมสัมผัสทั้ง 4 รายการรวมถึง IE เนื่องจากหน้าจอสัมผัสยังรองรับ MouseEvent คำสั่งซื้อของพวกเขาจะต้องสังเกต: TouchStart → MouseOver → Mousemove → Mousedown → Mouseup → Click1
ตัวอย่างมีดังนี้:
/*** ontouchEvent*/var div = document.getElementById ("div"); // touchStart คล้ายกับ mousedownDiv.ontouchStart = ฟังก์ชั่น (e) {// แอตทริบิวต์สัมผัสของเหตุการณ์เป็นอาร์เรย์ที่เรามีจุดสัมผัสน้อยกว่า e.touches [0]; // รับพิกัดของจุดสัมผัสปัจจุบันซึ่งเทียบเท่ากับ clientx/clientyvar x = touch.clientx; var y = touch.clienty;}; // touchmove คล้ายกับ mousemovediv.ontouchmove = function (e) {// การเลื่อน ฯลฯ E.preventDefault ();}; // touchend คล้ายกับ mouseUpdiv.ontouchup = function (e) {// ไม่มีอะไรทำ};2. ท่าทางท่าทางท่าทางหมายถึงการใช้มัลติทัชเพื่อหมุนยืดและการดำเนินการอื่น ๆ เช่นการขยายและหมุนภาพและหน้าเว็บ เหตุการณ์ท่าทางจะเกิดขึ้นเมื่อต้องใช้นิ้วสองนิ้วขึ้นไปในเวลาเดียวกัน สิ่งหนึ่งที่เราต้องให้ความสนใจเกี่ยวกับการปรับขนาดคือพิกัดตำแหน่งขององค์ประกอบ: เรามักจะใช้ออฟเซ็ต, getBoundingClientRect และวิธีอื่น ๆ เพื่อให้ได้ตำแหน่งพิกัดตำแหน่งขององค์ประกอบ แต่ในเบราว์เซอร์มือถือหน้ามักจะถูกปรับขนาดในระหว่างการใช้งาน คำตอบคือมีความแตกต่าง ใช้สถานการณ์เพื่อแสดงปัญหานี้: หลังจากโหลดหน้า A แล้ว JavaScript จะได้รับพิกัดขององค์ประกอบในเอกสารเป็น (100,100) จากนั้นผู้ใช้จะขยายหน้า ในเวลานี้ JavaScript ส่งออกองค์ประกอบประสานงานอีกครั้งและยังคง (100,100) แต่พื้นที่ตอบสนองขององค์ประกอบบนหน้าจอจะถูกชดเชยตามอัตราส่วนการปรับสเกล คุณสามารถเปิดการสาธิตเกมอิฐและจากนั้นซูมเข้าหลังจากหน้าเต็มแล้ว ในเวลานี้คุณจะพบว่าแม้ว่านิ้วของคุณจะสัมผัสนอกพื้นที่ "สัมผัสที่นี่" คุณสามารถควบคุมแผ่นบอลได้เพราะพื้นที่นั้นชดเชย ออฟเซ็ตจะมีอยู่เสมอเว้นแต่ว่าหน้าจะรีเฟรชหรือการซูมจะถูกกู้คืน
/*** OnderSureEvent*/var div = document.getElementById ("div"); div.ongesturechange = ฟังก์ชั่น (e) {// มาตราส่วนแสดงถึงมาตราส่วนการปรับขนาดที่สร้างขึ้นโดยท่าทาง น้อยกว่า 1 กำลังหดตัวและมากกว่า 1 คือการขยายตัว เดิมที 1VAR Scale = E.Scale; // การหมุนหมายถึงมุมของท่าทางการหมุน, ช่วงเวลาของค่า [0,360], ค่าบวกหมุนตามเข็มนาฬิกา, ค่าลบค่าทวนเข็มนาฬิกา VAR = E.rotation;};3. การตรวจจับแรงโน้มถ่วงแรงโน้มถ่วงง่ายกว่าคุณจะต้องเพิ่มเหตุการณ์ onorientationchange ลงในโหนดร่างกาย ในเหตุการณ์นี้ค่าที่แสดงถึงทิศทางโทรศัพท์ปัจจุบันได้มาจากคุณสมบัติของหน้าต่าง รายการค่าของ Window.Orientation มีดังนี้:
0: สอดคล้องกับทิศทางที่หน้าถูกโหลดครั้งแรก
-90: หมุนตามเข็มนาฬิกา 90 °เมื่อเทียบกับทิศทางดั้งเดิม
180: เปลี่ยน 180 °
90: หมุน 90 °ทวนเข็มนาฬิกา จากการทดสอบของฉัน Android 2.1 ยังไม่รองรับแรงโน้มถ่วง ข้างต้นเป็นเหตุการณ์หน้าจอสัมผัสปัจจุบัน เหตุการณ์เหล่านี้ไม่ได้ถูกรวมเข้ากับมาตรฐาน แต่มีการใช้กันอย่างแพร่หลาย ฉันมี Android 2.1 ไม่ได้ทดสอบในสภาพแวดล้อมอื่น ๆ
PS: ที่นี่เราให้บริการเครื่องมือออนไลน์เกี่ยวกับเหตุการณ์ JS ซึ่งสรุปประเภทเหตุการณ์ที่ใช้กันทั่วไปและฟังก์ชั่นฟังก์ชั่นของ JS:
รายการเหตุการณ์และฟังก์ชั่น JavaScript ทั้งหมด:
http://tools.vevb.com/table/javascript_event
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน