طريقة تنفيذ حدث اللمس HTML5 لتنفيذ شريط التقدم البسيط على الجهاز المحمول

تمت إضافة العديد من الأحداث الجديدة إلى HTML، ولكن بسبب مشكلات التوافق، لم يتم استخدام العديد من الأحداث على نطاق واسع. بعد ذلك، سنقدم بعض أحداث اللمس المحمولة المفيدة: touchstart، touchmove، touchend.

ولنعرض هذه الأحداث بإيجاز:

1. touchstart: يتم تشغيله عندما يلمس إصبعك الشاشة، حتى لو كان هناك إصبع بالفعل على الشاشة.
2. touchmove: يتم تشغيله بشكل مستمر عندما ينزلق الإصبع على الشاشة. خلال هذا الحدث، يمكن أن يؤدي استدعاء الحدث PreventDefault() إلى منع التمرير.
3. touchend: يتم تشغيله عندما يترك الإصبع الشاشة.

أحداث اللمس هذه لها خصائص dom مشتركة. بالإضافة إلى أنها تحتوي على ثلاث خصائص لتتبع اللمسات:

1. اللمسات: مجموعة من كائنات اللمس التي تمثل عمليات اللمس المتعقبة حاليًا.
2. targetTouches: مجموعة من كائنات اللمس الخاصة بأهداف الحدث.
3. ChangeTouches: مجموعة من كائنات اللمس التي تمثل ما تغير منذ آخر لمسة.

يحتوي كل كائن لمس على الخصائص التالية:

1. ClientX: الإحداثي x لهدف اللمس في إطار العرض.
2. ClientY: الإحداثي y لهدف اللمس في إطار العرض.
3. pageX: الإحداثي السيني لهدف اللمس في الصفحة.
4. pageY: الإحداثي y لهدف اللمس في الصفحة.
5. screenX: screenX: الإحداثي x لهدف اللمس في الشاشة.
6. screenY: screenX: الإحداثي x لهدف اللمس في الشاشة.
7. المعرف: معرف فريد يحدد اللمس.
8. الهدف: screenX: الإحداثي x لهدف اللمس في الشاشة.

الآن بعد أن فهمت خصائص أحداث اللمس، فلنبدأ الجلسة العملية المثيرة.

دعونا نستخدم أحداث اللمس لتنفيذ شريط تقدم منزلق على الجانب المحمول.

لنضع HTML أولاً

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

تم حذف جزء CSS هنا

احصل على عنصر dom وقم بتهيئة نقطة بداية اللمس والمسافة بين الزر والجزء الأيسر من الحاوية

 constprogressWrapper = document.querySelector('.progress-wrapper')constتقدم = document.querySelector('.progress')constprogressBtn = document.querySelector('.progress-btn')constprogressWrapperWidth =progressWrapper.offsetWidthlet touchPoint = 0let btnLeft = 0

الاستماع إلى الحدث touchstart

 progressBtn.addEventListener('touchstart', e => { Let touch = e.touches[0] touchPoint = touch.clientX // احصل على الموضع الأولي للمس btnLeft = parseInt(getComputedStyle(progressBtn, null)['left'] ، 10) // تجاهل توافق متصفح IE هنا})

الاستماع لأحداث touchmove

 progressBtn.addEventListener('touchmove', e => {e.preventDefault() Let touch = e.touches[0] Let diffX = touch.clientX - touchPoint // احسب المسافة المتغيرة بالفرق بين الموضع الحالي والموضع الأولي Position Let btnLeftStyle = btnLeft + diffX // تحديد قيمة يسرى جديدة للزر touch.target.style.left = btnLeftStyle + 'px' progress.style.width = (btnLeftStyle /progressWrapperWidth) * 100 + '%' // احسب النسبة المئوية لطول شريط التقدم من خلال نسبة القيمة اليسرى للزر إلى طول حاوية شريط التقدم})

من خلال سلسلة من العمليات المنطقية، تم تنفيذ شريط التقدم الخاص بنا بشكل أساسي، ولكن تم اكتشاف مشكلة عندما يتجاوز موضع اللمس حاوية شريط التقدم، فلنفرض بعض القيود.

 إذا (btnLeftStyle >progressWrapperWidth) { btnLeftStyle =progressWrapperWidth } else if (btnLeftStyle < 0) { btnLeftStyle = 0}

في هذه المرحلة، تم تنفيذ شريط تمرير متنقل بسيط

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.