شرح تفصيلي لمستحقاق التouch في الهواتف المحمولة

في تطوير الهاتف المحمول، يعد من الأسهل أولاً تصميم النموذج على سطح المكتب، ثم التعامل مع الجوانب الخاصة بالهاتف المحمول على الأجهزة التي تخطط لدعمها. أحداث لمس متعدد النقاط هي واحدة من الأنظمة التي يصعب اختبارها على الكمبيوتر، لأن معظم الكمبيوترات لا تحتوي على إدخال لمس.　

قد يطول فترة تطويرك إذا كنت بحاجة إلى إجراء اختبارات على الأجهزة المحمولة، لأن كل تغيير تقوم به يتطلب إرسال الكود إلى الخادم، ثم تحميله على الجهاز. بعد ذلك، لا يوجد الكثير من الت调试 بعد التشغيل، لأن الأجهزة اللوحية والهواتف الذكية غالبًا ما تكون مفتقرة إلى أدوات المطورين الويب.

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

أحداث لمس نقطة واحدة　

إذا كنت ترغب في محاكاة أحداث لمس نقطة واحدة على سطح المكتب، جرب Phantom Limb، هذا البرنامج يمثل أحداث لمس على الويب ويقدم يد عملاقة لتوجيه.
إلى جانب jQuery Touchable هذا الملحق، الذي يوحد أحداث لمس الفأرة وأحداث الماوس عبر المنصات المختلفة　

أحداث لمس متعدد النقاط　

لتمكين تشغيل تطبيق التouch多点触摸web الخاص بك في المتصفح أو لوحة التحكم المتعددة النقاط (مثل Apple MacBook أو MagicPad)، أنشأت هذه الأداة MagicTouch.js لملء، التي تقوم بالتقاطع من أحداث التouch من لوحة التحكم، وتحويلها إلى أحداث لمس متوافقة بالمعايير.　
1. تنزيل ملف التكامل NPAPI npTuioClient وضعه في مجلد ~/Library/Internet Plug-Ins/.　
2. تنزيل تطبيق TongSeng TUIO هذا لمagicPad Mac وتشغيل هذا الخادم.　
3. قم بتحميل مكتبة JavaScript MagicTouch.js لتشغيل أحداث اللمس المتوافقة مع المعايير من خلال npTuioClient.　
4. قم بإدراج ملف script الخاص بـ magictouch.js ومكون npTuioClient في تطبيقك كما يلي:　

< head>
 ...
 < script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script>
< /head>
< body>
 ...
 < object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;">
 لم ينجح تحميل مكون إدخال اللمس!
 < /object>
< /body>

　

لقد قمت باختبار هذه الطريقة فقط في Chrome 10، ولكن يجب أن تعمل بعد القليل من التغييرات في المتصفحات الحديثة الأخرى.　

إذا لم يكن لديك إدخال لمس متعدد على جهازك، يمكنك استخدام مكونات تتبع أخرى مثل reacTIVision لتقليد أحداث اللمس. للحصول على مزيد من المعلومات، يرجى الرجوع إلى صفحة مشروع TUIO.　

شيء يجب ملاحظته هو أن اللمس الخاص بك يمكن أن يكون مشابهاً للغاية لللمس المتعدد على مستوى نظام التشغيل. في OS X، يمكنك تكوين الأحداث على مستوى النظام عبر الدخول إلى إعدادات النظام وتحديد صفحة تفضيلات Trackpad.

أنا سعيد جداً برؤية دعم وظيفة اللمس المتعدد بشكل متزايد في المتصفحات المتنقلة، وأرى تطبيقات الويب الجديدة تستفيد من هذا API الغني.

مصدر المقال: html5rocks.com　
عنوان المقال الأصلي: تطوير تطبيقات الويب المتعددة اللمس

أولاً: أحداث لمس الهاتف

أحداث أساسية:

touchstart // يتم إطلاق هذا الحدث عند لمس الأصبع للشاشة　
touchmove // يتم إطلاق هذا الحدث عند تحريك الأصبع على الشاشة　
touchend // يتم إطلاق هذا الحدث عند انتزاع الأصبع من الشاشة

هذا النوع من الحدث يستخدم بشكل أقل: touchcancel // يتم إطلاق هذا الحدث عند إلغاء عملية اللمس من قبل النظام　

كل حدث له القوائم التالية، على سبيل المثال: targetTouches في حدث touchend هو بالطبع 0:

touches // قائمة بكل الأصابع الموجودة على الشاشة
targetTouches // قائمة بكل الأصابع الموجودة على العنصر
changedTouches // قائمة بكل الأصابع المتعلقة بالحدث الحالي　

كل حدث له قائمة، وكل قائمة لها الخصائص التالية:

حيث يستخدم عادة pageX, pageY:　

pageX // التردد في الاتجاه X بالنسبة للصفحة　
pageY // التردد في الاتجاه Y بالنسبة للصفحة　
clientX // التردد في الاتجاه X بالنسبة للمنطقة العرضية　
clientY // التردد في الاتجاه Y بالنسبة للمنطقة العرضية　
screenX // التردد في الاتجاه X بالنسبة للشاشة　
screenY // التردد في الاتجاه Y بالنسبة للشاشة
identifier // رقم التلمس الحالي الفريد　
target // العنصر DOM الذي يتم لمسه　　

أحداث مرتبطة أخرى:
event.preventDefault（） // تمنع التكبير والتدول عند لمس المتصفح　
var supportTouch = "createTouch" in document // تحديد ما إذا كان يدعم أحداث اللمس

ثانيًا، مثال

هذه هي كودات الحصول على أنواع اللمس المختلفة، وبتجمع الأفكار السابقة، تم تعبئة وتعبئة، يمكن أن تستفيد من ذلك للتعلم:

var touchFunc = function(obj,type,func) { 
 // نطاق اللمس يجب أن يكون داخل 5x5 للحصول على معالجة النقر، s هو البداية، e هو النهاية 
 var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0}; 
 var sTime = 0, eTime = 0; 
 type = type.toLowerCase();
 obj.addEventListener("touchstart",function(){ 
  sTime = new Date().getTime(); 
  init.sx = event.targetTouches[0].pageX; 
  init.sy = event.targetTouches[0].pageY; 
  init.ex = init.sx; 
  init.ey = init.sy; 
  إذا (type.indexOf("start") != -1) func(); 
 }, false);
 obj.addEventListener("touchmove",function() { 
  event.preventDefault(); // تمنع التكبير والتدول عند لمس المتصفح 
   init.ex = event.targetTouches[0].pageX; 
  init.ey = event.targetTouches[0].pageY; 
  إذا (type.indexOf("move") != -1) func(); 
 }, false);
 obj.addEventListener("touchend",function() {}}) 
  var changeX = init.sx - init.ex; 
  var changeY = init.sy - init.ey;
   if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) { 
   // أحداث الأسفل والأفقية 
   if(changeX > 0) { 
    if(type.indexOf("left")!=-1) func(); 
   } 
    if(type.indexOf("right")!=-1) func();
   } 
  } 
  else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){ 
   // أحداث الأسفل والعمودي 
   if(changeY > 0) {
     if(type.indexOf("top")!=-1) func(); 
   } 
    if(type.indexOf("down")!=-1) func(); 
   } 
  }
  else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){ 
   eTime = new Date().getTime();
    // أحداث النقر، يتم تقسيمها بناءً على الفرق في الوقت 
   if((eTime - sTime) > 300) { 
    if(type.indexOf("long")!=-1) func(); // النقر الطويل
    }
    else {
     if(type.indexOf("click")!=-1) func(); // معالجة النقر
    }
   } 
  if(type.indexOf("end")!=-1) func(); 
 }, false); 
}; 

المقال المُقتبس:أحداث JavaScript للشاشة التفاعلية للهاتف

تعامل مع أحداث التouch يمكنه تتبع موقع كل أصبع من أصابع المستخدم. يمكنك ربط من بين الأحداث التالية للنقر على الشاشة:　

　　　 1.touchstart: // يتم تفعيل هذا الحدث عند وضع الأصبع على الشاشة　　
　　　 2.touchmove: // يتم تفعيل هذا الحدث عند تحريك الأصبع على الشاشة　　
　　　 3.touchend: // يتم تفعيل هذا الحدث عند رفع الأصبع من الشاشة　　
　　　 4touchcancel: // عند إلغاء النقر على التouch يُتم تفعيل هذا الحدث. ولكن لا يتم تحديد متى يتم إلغاء النقر، غير معروف　

خصائص　

　　　 1.client / clientY: // موقع اللمسة بالنسبة للنافذة العريضة للتصفح　　
　　　 2.pageX / pageY: // موقع اللمسة بالنسبة للصفحة　　
　　　 3.screenX /screenY: // موقع اللمسة بالنسبة للشاشة　　
　　　 4.identifier: // ID الفريد لللمسة　

//حدث touchstart 
function touchSatrtFunc(e) { 
 //evt.preventDefault(); //منع تضخيم المتصفح أثناء اللمس، تمرير عجلة التمرير، إلخ 
 var touch = e.touches[0]; //الحصول على أول لمسة 
 var x = Number(touch.pageX); //موقع اللمس على الصفحة من حيث المحور X 
 var y = Number(touch.pageY); //موقع اللمس على الصفحة من حيث المحور Y 
 //تسجيل موقع اللمس الأولي 
 startX = x; 
 startY = y; 
} 
//حدث touchmove 
function touchMoveFunc(e) { 
 //evt.preventDefault(); //منع تضخيم المتصفح أثناء اللمس، تمرير عجلة التمرير، إلخ 
 var touch = evt.touches[0]; //الحصول على أول لمسة 
 var x = Number(touch.pageX); //موقع اللمس على الصفحة من حيث المحور X 
 var y = Number(touch.pageY); //موقع اللمس على الصفحة من حيث المحور Y 
 var text = 'تم إطلاق حدث TouchMove: (' + x + ', ' + y + ')'; 
 //تحديد اتجاه التمرير 
 if (x - startX != 0) { 
 //تمرير لليمين ولليسار 
 } 
 if (y - startY != 0) { 
 //تمرير لأسفل ولأعلى 
 } 
} 

المقالة الثانية المُنقولة:سلسلة تطوير Mobile Web الأمامي: معالجة الحوادث (ثاني)

في المقالة السابقة، تحدثنا عن الحوادث الأساسية لـ html، في هذا المقال سنقوم بشرح الحوادث اللمسية، والشروط التي تؤدي إلى إطلاق الحوادث اللمسية هي لمس اليد على الشاشة أو تحريك اليد على الشاشة أو مغادرة اليد من الشاشة. الحدث هو مجموعة من اللمسات، ويبدأ عندما يتم وضع اليد لأول مرة على الشاشة، ينتهي عندما يترك أخر أصبع الشاشة. يتم تخزين جميع العمليات اللمسية خلال عملية الحدث من البداية إلى النهاية في سجل الحدث نفسه.　

الحدث اللمسي　

الحدث اللمسي يمكن تقسيمه إلى نوعين: لمسة نقاط واحدة ولمسة متعددة، حيث يدعم الهواتف الذكية العالية الجودة لمسة النقطة الواحدة عادةً، ويدعم Safari 2.0 وAndroid 3.0 والإصدارات الأحدث لمس المتعدد، حيث يمكن لمس أقصى 5 أصابع في نفس الوقت على الشاشة، والiPad يدعم أقصى 11 أصبعًا في نفس الوقت على الشاشة، يمكننا استخدام نموذج الحدث التالي لالتقاط هذه الحوادث:　
ontouchstart ontouchmove ontouchend ontouchcancel　

عندما يضغط المستخدم أصبعه على الشاشة، يتم تنشيط ontouchstart، وعندما يتحرك المستخدم واحدًا أو أكثر من الأصابع، يتم تنشيط ontouchmove، وعندما ينتقل المستخدم عن الأصابع، يتم تنشيط ontouchend. ولكن متى يتم تنشيط ontouchcancel؟ عند حدوث أحداث أعلى مستوى، مثل alert، أو وصول مكالمة هاتفية أو إشعارات إرسال، يتم إلغاء عملية اللمس الحالية، مما يؤدي إلى تنشيط ontouchcancel. عند تطوير لعبة ويب، يكون ontouchcancel مهمًا جدًا لك، حيث يمكنك إيقاف اللعبة أو حفظ اللعبة عند تنشيط ontouchcancel.　

أحداث gesture　

يعمل مبدأ gesture أحداث بنفس الطريقة التي تعمل بها أحداث touch، لكن أحداث gesture تُشغّل فقط عندما يكون هناك على الأقل أصابعتان على الشاشة، لذا يدعم Safari 2.0 وAndroid 3.0 وما فوق، ولهذه الحركات العديد من المزايا، يمكن أن تساعدنا في قياس العمليات مثل تقليل وتكبير وإدارة العقد، وفقًا للنموذج التالي للحدث:
ongesturestart ongesturechange ongestureend　

خصائص الحدث　

بغض النظر عما إذا كنت تستخدم أحداث اللمس أو الحركات، تحتاج إلى تحويل هذه الأحداث إلى لمسات فردية لاستخدامها. لذلك، تحتاج إلى الوصول إلى سلسلة من خصائص موضوع الحدث.　

targetTouches - جميع اللمسات الحالية على العنصر المستهدف changedTouches - جميع اللمسات التي تم تغييرها حديثًا على الصفحة touches - جميع اللمسات على الصفحة　

يحتوي changedTouches و targetTouches و touches على قوائم لمس مختلفة قليلاً. يحتوي targetTouches و touches على قائمة بأصابع توجد على الشاشة حاليًا، لكن changedTouches يقوم فقط بقائمة باللمسات التي تم تغييرها حديثًا. إذا كنت تستخدم أحد أحداث touchend أو gestureend، فإن هذه الخاصية مهمة جدًا. في هذه الحالات، لا توجد أصابع على الشاشة بعد الآن، لذا يجب أن تكون targetTouches و touches فارغة، لكن يمكنك معرفة ما حدث أخيرًا من خلال النظر إلى قائمة changedTouches.　

بما أن خصائص اللمس تنتج دائمًا قوائم، يمكنك استخدام وظائف قوائم جافا سكريبت للوصول إليها. هذا يعني، event.touches[0] ستعود إلى اللمسة الأولى، ويمكنك استخدام event.touches.length لتحديد عدد اللمسات المحفوظة حاليًا.　

في التحقق من اللمس الفرداني، باستخدام event.targetTouches[0]，يمكنك الوصول إلى اللمسات الأخرى، حيث يحتوي كل لمسة على بعض المعلومات المحددة،　

clientX، clientY مقياسًا للمنطقة X أو Y الحالية للشاشة pageX، pageY مقياسًا للمنطقة X أو Y للصفحة ككل screenX، screenY مقياسًا للمنطقة X أو Y للشاشة الشخصية identifier معرف الحدث الفريد target الجسم المستهدف لللمس　

سيكون objeven الخاص بأحداث اللمس وال手势ات أعمق بخصائص إضافيتين، rotation درجة دوران الإصبع، scale قيمة التكبير/التقليل

نقل المقال:أحداث اللمس وال手势ات بلغة JavaScript

أضافت Safari الخاصة بـ iOS بعض الأحداث المخصصة لتقديم بعض المعلومات الخاصة للجهات الناشرة. نظرًا لأن أجهزة iOS لا تحتوي على فأرة أو لوحة مفاتيح، فإن أحداث الفأرة واللوحة المفاتيح العادية لا تكفي لتطوير صفحات التفاعل المتنقلة. مع إضافة WebKit في Android، أصبحت العديد من هذه الأحداث المخصصة معايير واقعية.　

1. أحداث اللمس

بمجرد إطلاق iPhone 3G الذي يحتوي على نظام iOS 2.0، تم أيضًا إطلاق إصدار جديد من متصفح Safari. يقدم هذا متصفح Safari المحمول الجديد بعض الأحداث الجديدة المتعلقة بالعمليات اللمسية (touch). لاحقًا، تم تنفيذ نفس الأحداث في متصفحات Android. تتم تنشيط أحداث اللمس عند وضع الإصبع على الشاشة، أو سحبه عليها أو انتزاعه منها. على وجه التحديد، هناك عدة أحداث لمس.　

touchstart: يتم تنشيط هذا الحدث عند لمس الشاشة من قبل الإصبع؛ حتى لو كان هناك إصبع بالفعل على الشاشة.　
touchmove: يتم تنشيط هذا الحدث بشكل متتابع عند سحب الإصبع على الشاشة. يمكن منع التمرير باستدعاء preventDefault() خلال هذه الفترة.　
touchend: يتم تنشيط هذا الحدث عند انتزاع الإصبع من الشاشة.
touchcancel: يتم تنشيط هذا الحدث عند توقف النظام عن تتبع اللمس. لا يوجد وصف دقيق للحالة التي يتم فيها تنشيط هذا الحدث في الوثيقة.　

تحدث هذه الأحداث أيضًا عن بث ناري ويمكن إلغاءها. على الرغم من أن هذه أحداث اللمس لم يتم تعريفها في معيار DOM، إلا أنها تم تنفيذها بطريقة متوافقة مع DOM. لذلك، لا يتم تعريف كل أحداث اللمس في معيار DOM، ولكن يتم تنفيذها بطريقة متوافقة مع DOM. لذلك، يقدم كل أحداث اللمس على objeven الخاص بها الخصائص الشائعة في أحداث الفأرة: bubbles، cancelable، view، clientX، clientY، screenX، screenY، detail، altKey، shiftKey، ctrlKey و metaKey.　

بالإضافة إلى الخصائص DOM الشائعة، تحتوي أحداث اللمس أيضًا على الثلاث خصائص التالية المستخدمة لتتبع اللمس.　
touches: تمثل قائمة Touch لعمليات التتبع الحالية لللمس.　
targetTouches: هو مجموعة Touch متعلقة بالنقطة المستهدفة للحدث.　
changeTouches: هو مجموعة Touch تم تغييرها منذ آخر لمس.　

يحتوي كل Touch على الخاصيات التالية.　
clientX: الموقع العمودي للنقطة المستهدفة في نافذة التصفح.　
clientY: الموقع الأفقي للنقطة المستهدفة في نافذة التصفح.　
identifier: هو رمز فريد يمثل لمس.　
pageX: الموقع العمودي للنقطة المستهدفة في الصفحة.　
pageY: الموقع الأفقي للنقطة المستهدفة في الصفحة.　
screenX: الموقع العمودي للنقطة المستهدفة في الشاشة.　
screenY: الموقع الأفقي للنقطة المستهدفة في الشاشة.　
target: موقع النقطة DOM التي تم لمسها.　

استخدام هذه الخاصيات يمكن تتبع تفاعلات المستخدم مع لمس الشاشة. انظر الأمثلة التالية.

 function handleTouchEvent(event) { 
 //只跟踪一次触摸 
 if (event.touches.length == 1) { 
 var output = document.getElementById("output"); 
 switch (event.type) { 
 case "touchstart": 
 output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; 
 breake; 
 case "touchend": 
 output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
 breake; 
 case "touchmove": 
 event.preventDefault(); //阻止滚动 
 output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; 
 breake;
 }
 }
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false); 
document.addEventListener("touchmove", handleTouchEvent, false); 

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

في العنصر. عند حدوث حادث touchmove، يتم إلغاء سلوكه الافتراضي، وتجنب الدوران (سلوك touchmove الافتراضي هو دوران الصفحة)، ثم يتم إخراج معلومات تغيير اللمس. أما حادث touched فإنه يخرج معلومات النهاية الخاصة باللمس. يرجى ملاحظة أن لا يوجد أي Touch object في مجموعة touched عند حدوث حادث touched، لأن لا يوجد أي عملية لمس نشطة في ذلك الوقت؛ لذا يجب اللجوء إلى مجموعة changeTouchs.　

تتم إطلاق هذه الحوادث على جميع عناصر المستند، لذا يمكن معالجة أجزاء مختلفة من الصفحة بشكل منفرد. عند لمس العناصر على الشاشة، يحدث هذه الحوادث في الترتيب التالي:　
touchstart　
mouseover　
mousemove　
mousedown　
mouseup　
click
　touchend　

تدعم متصفحات تشغيل حوادث اللمس بما في ذلك Safari الإصدار iOS، WebKit الإصدار Android، إصدار beta من Dolfin، WebKit في BlackBerry من إصدار OS6+، Opera Mobile 10.1، و متصفح phantom في نظام التشغيل الخاص بـ LG. في الوقت الحالي، يدعم Safari الإصدار iOS فقط多点 لمس. يدعم إصدارات Firefox 6+ و Chrome لمس الحوادث على سطح المكتب.　

2. حوادث اللمس　

أدت Safari في iOS 2.0 إلى إدخال مجموعة من حوادث اللمس. يتم إنتاج حوادث اللمس عند لمس الشاشة بأصابعتين، حيث تتغير عادةً حجم العنصر المعروض أو يتم إدارة العنصر. هناك ثلاثة أنواع من حوادث اللمس، وهي كالتالي.　
gesturestart:تتم إطلاق هذه الحوادث عندما يكون أصبع بالفعل ممسًا على الشاشة بينما يتم لمس الشاشة بأصبع آخر.　
gesturechange:تتم إطلاق هذه الحوادث عند تغيير موقع أي أصبع على الشاشة.　
gestureend:تتم إطلاق هذه الحوادث عند انتزاع أي أصبع من الشاشة.　

فقط عندما يتم لمس كلاً من الأصابع إلى وحدة استقبال الحدث سيتولد هذه الحوادث. وضع معالج الحدث على عنصر يعني أن يجب أن تكون كلاً من الأصابع داخل نطاق العنصر حتى يتم تفعيل حوادث اللمس (هذا العنصر هو الهدف). بسبب أن هذه الحوادث تتدفق، يمكن وضع معالج الحدث على مستند لمعالجة جميع حوادث اللمس. في هذه الحالة، يكون الهدف من الحدث هو العنصر الذي تتواجد فيه كلاً من الأصابع.　

يوجد علاقة بين أحداث اللمس وأحداث حركة اليد. عند وضع إصبع على الشاشة، يتم إطلاق أحداث touchstart. إذا وضع إصبع آخر على الشاشة، يتم إطلاق أحداث gesturestart أولاً، ثم أحداث touchstart التي تعتمد على الإصبع الآخر. إذا سحبت إحدى أو إثنتين من الأصابع على الشاشة، يتم إطلاق أحداث gesturechange، ولكن إذا أزيلت إحدى الأصابع، يتم إطلاق أحداث gestureend، وثم أحداث touchend التي تعتمد على الإصبع المتبقي.　

مثل أحداث اللمس، يحتوي كل أحداث حركة اليد على خصائص أحداث الفأرة القياسية: bubbles،cancelable،view،clientX،clientY،screenX،screenY،detail،altKey،shiftKey،ctrlKey و metaKey. بالإضافة إلى ذلك، يحتوي على خاصيتين إضافيتين: rotation و scale. حيث تُمثل خاصية rotation الزاوية التي تتغير بسبب حركة اليد، حيث أن القيمة السلبية تشير إلى التدوير المعاكس، والقيمة الإيجابية تشير إلى التدوير المباشر (بدءًا من القيمة 0). أما خاصية scale، فإنها تمثل تغيير مسافة بين الأصابع (مثل التقريب الداخلي الذي يقلل المسافة); تبدأ القيمة من 1، وتزيد مع زيادة المسافة، وتقل مع تقليل المسافة.　

إليك مثال على استخدام حركة اليد:　

function handleGestureEvent(event) { 
 var output = document.getElementById("output"); 
 switch(event.type) {
 case "gesturestart": 
 output.innerHTML = "بدأت حركة اليد (التمدد=" + event.ratation +",نسبة التمديد=" + event.scale + ")"; 
 breake;
 case "gestureend": 
 output.innerHTML += "<br>حركة اليد انتهت (التمدد+" + event.rotation + ",نسبة التمديد=" + event.scale + ")"; 
 breake; 
 case "gesturechange": 
 output.innerHTML += "<br>Gesture changed (rotation+=" + event.rotation + ",scale+" + event.scale + ")"; 
 breake; 
 } 
}
document.addEventListener("gesturestart", handleGestureEvent, false); 
document.addEventListener("gestureend", handleGestureEvent, false); 
document.addEventListener("gesturechange", handleGestureEvent, false); 

مثل مثال عرض الحدث اللمس السابق، يربط هذا الكود كل حدث إلى نفس الدالة، ثم يعرض معلومات كل حدث من خلال هذه الدالة.

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

البيان: محتويات هذا المقال مأخوذة من الإنترنت، ملكية حقوق النشر لأصحابها، المحتوى من إسهامات المستخدمين على الإنترنت، ويتم تحميله بشكل مستقل، ويحمل الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل إنساني، ولا يتحمل المسؤولية القانونية المتعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) لتقديم الشكوى، وقدم الدليل على الدليل، وإذا تم التحقق من صحة الشكوى، سيتم حذف المحتوى المزعوم بسرعة.