วิธีการปรับใช้เหตุการณ์การสัมผัส HTML5 เพื่อใช้แถบความคืบหน้าอย่างง่ายบนเทอร์มินัลมือถือ

มีการเพิ่มกิจกรรมใหม่ ๆ มากมายลงใน HTML แต่เนื่องจากปัญหาความเข้ากันได้ กิจกรรมจำนวนมากจึงไม่ได้ใช้กันอย่างแพร่หลาย ต่อไป เราจะแนะนำกิจกรรมการสัมผัสบนมือถือที่มีประโยชน์: touchstart, touchmove, touchend

มาแนะนำเหตุการณ์เหล่านี้โดยย่อ:

1. touchstart: เริ่มทำงานเมื่อมีนิ้วสัมผัสหน้าจอ แม้ว่าจะมีนิ้วอยู่บนหน้าจออยู่แล้วก็ตาม
2. touchmove: เปิดใช้งานอย่างต่อเนื่องเมื่อนิ้วเลื่อนบนหน้าจอ ในระหว่างเหตุการณ์นี้ การเรียกเหตุการณ์ PreventDefault() สามารถป้องกันการเลื่อนได้
3. สัมผัสปลาย: ทริกเกอร์เมื่อนิ้วออกจากหน้าจอ

เหตุการณ์การสัมผัสเหล่านี้มีคุณสมบัติ dom เหมือนกัน นอกจากนี้ยังมีคุณสมบัติสามประการสำหรับการติดตามการสัมผัส:

1. การสัมผัส: อาร์เรย์ของวัตถุการสัมผัสที่แสดงถึงการดำเนินการสัมผัสที่ติดตามในปัจจุบัน
2. targetTouches: อาร์เรย์ของวัตถุ Touch เฉพาะสำหรับเป้าหมายเหตุการณ์
3. changeTouches: อาร์เรย์ของวัตถุ Touch ที่แสดงถึงสิ่งที่เปลี่ยนแปลงไปนับตั้งแต่การสัมผัสครั้งล่าสุด

วัตถุสัมผัสแต่ละอันมีคุณสมบัติดังต่อไปนี้:

1. clientX: พิกัด x ของเป้าหมายการสัมผัสในวิวพอร์ต
2. clientY: พิกัด y ของเป้าหมายการสัมผัสในวิวพอร์ต
3. pageX: พิกัด x ของเป้าหมายการสัมผัสในหน้า
4. pageY: พิกัด y ของเป้าหมายการสัมผัสในหน้า
5. screenX: screenX: พิกัด x ของเป้าหมายการสัมผัสในหน้าจอ
6. screenY: screenX: พิกัด x ของเป้าหมายการสัมผัสในหน้าจอ
7. ตัวระบุ: ID เฉพาะที่ระบุการสัมผัส
8. เป้าหมาย: screenX: พิกัด x ของเป้าหมายการสัมผัสในหน้าจอ

ตอนนี้คุณเข้าใจลักษณะของกิจกรรมการสัมผัสแล้ว มาเริ่มเซสชั่นภาคปฏิบัติที่น่าตื่นเต้นกันดีกว่า

ลองใช้เหตุการณ์การสัมผัสเพื่อใช้แถบความคืบหน้าแบบเลื่อนทางฝั่งมือถือ

มาจัดวาง HTML ก่อน

 <div class=progress-wrapper> <div class=progress></div> <div class=progress-btn></div></div>

ส่วน CSS ละเว้นที่นี่

รับองค์ประกอบ dom และเริ่มต้นจุดเริ่มต้นการสัมผัสและระยะห่างระหว่างปุ่มและส่วนซ้ายสุดของคอนเทนเนอร์

 constความคืบหน้าWrapper = document.querySelector('.progress-wrapper')constความคืบหน้า = document.querySelector('.progress')constprogressBtn = document.querySelector('.progress-btn')constprogressWrapperWidth =progressWrapper.offsetWidthlet touchPoint = 0let btnLeft = 0

ฟังกิจกรรม TouchStart

 ความคืบหน้าBtn.addEventListener('touchstart', e => { ให้สัมผัส = e.touches[0] touchPoint = touch.clientX // รับตำแหน่งเริ่มต้นของการสัมผัส btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'] , 10 ) // ละเว้นความเข้ากันได้ของเบราว์เซอร์ IE ที่นี่})

ฟังเหตุการณ์ touchmove

 ความคืบหน้าBtn.addEventListener('touchmove', e => {e.preventDefault() ให้ touch = e.touches[0] ให้ diffX = touch.clientX - touchPoint // คำนวณระยะทางที่เปลี่ยนแปลงโดยความแตกต่างระหว่างตำแหน่งปัจจุบันและค่าเริ่มต้น ตำแหน่ง ให้ btnLeftStyle = btnLeft + diffX // กำหนดค่าซ้ายใหม่สำหรับปุ่ม touch.target.style.left = btnLeftStyle + 'px' progress.style.width = (btnLeftStyle / ProgressWrapperWidth) * 100 + '%' // คำนวณเปอร์เซ็นต์ความยาวของแถบความคืบหน้าผ่านอัตราส่วนของค่าด้านซ้ายของปุ่มต่อความยาวของคอนเทนเนอร์แถบความคืบหน้า})

โดยพื้นฐานแล้วแถบความคืบหน้าของเราได้ถูกใช้งานผ่านการดำเนินการเชิงตรรกะหลายชุด แต่พบปัญหาเมื่อตำแหน่งสัมผัสเกินคอนเทนเนอร์แถบความคืบหน้า เรามาสร้างข้อจำกัดกัน

 ถ้า (btnLeftStyle >ความคืบหน้าWrapperWidth) { btnLeftStyle =ความคืบหน้าWrapperWidth } อย่างอื่นถ้า (btnLeftStyle < 0) { btnLeftStyle = 0}

ณ จุดนี้ แถบเลื่อนบนมือถือแบบธรรมดาได้ถูกนำมาใช้แล้ว

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network