كيفية اكتشاف تمريرات الإصبع في JavaScript على iPhone وAndroid

عند تطوير تطبيقات الويب الملائمة للجوال، يتم اكتشاف إيماءات المستخدم مثل تمريرات الأصابع أمر بالغ الأهمية لإنشاء واجهات بديهية وسريعة الاستجابة. يوفر هذا الدليل حلاً شاملاً يمكّنك من اكتشاف تمريرات الإصبع في كل من أجهزة iPhone وAndroid باستخدام JavaScript.

لاكتشاف تمريرات الإصبع، نستفيد من مستمعي أحداث اللمس في JavaScript. فيما يلي نموذج لمقتطف التعليمات البرمجية للبدء:

document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function getTouches(evt) {
  return evt.touches || evt.originalEvent.touches;
}

function handleTouchStart(evt) {
  const firstTouch = getTouches(evt)[0];
  xDown = firstTouch.clientX;
  yDown = firstTouch.clientY;
}

function handleTouchMove(evt) {
  if (!xDown || !yDown) {
    return;
  }

  var xUp = evt.touches[0].clientX;
  var yUp = evt.touches[0].clientY;

  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;

  if (Math.abs(xDiff) > Math.abs(yDiff)) { /*most significant*/
    if (xDiff > 0) {
      /* right swipe */
    } else {
      /* left swipe */
    }
  } else {
    if (yDiff > 0) {
      /* down swipe */
    } else {
      /* up swipe */
    }
  }
  /* reset values */
  xDown = null;
  yDown = null;
}

يستمع مقتطف الكود هذا إلى أحداث "touchstart" و"touchmove"، ويلتقط موضع اللمس الأولي بالإضافة إلى الموضع المحدث أثناء الحركة. من خلال مقارنة الاختلافات x وy، يمكننا تحديد اتجاه التمرير. سواء أكان ذلك تمريرًا سريعًا لليمين أو اليسار أو لأعلى أو لأسفل، فإن هذا الرمز يوفر حلاً قويًا لاكتشاف تمريرات الأصابع.

تم اختبار هذا الأسلوب والتحقق من أنه يعمل بفعالية على أجهزة Android. ومن خلال دمجها في قاعدة تعليمات JavaScript الخاصة بك، يمكنك إنشاء تجارب الويب للجوال أولاً والتي تُسعد المستخدمين من خلال تفاعلات سلسة تعتمد على الإيماءات.