على أجهزة الشاشة التي تعمل باللمس ، يجب تنفيذ بعض الإيماءات الأساسية نسبيًا عن طريق التغليف الثانوي لأحداث اللمس.
Zepto هي مكتبة فئة ذات معدلات استخدام عالية نسبيًا على الأجهزة المحمولة ، ولكن بعض الأحداث التي يتم محاكاةها بواسطة وحدة اللمس لديها بعض مشاكل التوافق ، مثل أحداث TAP التي لها أخطاء تغلغل الأحداث على بعض أجهزة Android ، وأنواع أخرى من الأحداث لديها أيضًا مشاكل توافق أكثر أو أقل.
لذلك ، قمت ببساطة بتغليف أحداث الإيماءات الشائعة الاستخدام بنفسي. نظرًا لعدم وجود العديد من الأجهزة الحقيقية للاختبار ، قد يكون هناك بعض مشكلات التوافق. يتم اختبار الرمز التالي فقط في بعض المتصفحات الأكثر شيوعًا على iOS 7 و Andorid 4.
اضغط على الحدث
يعد حدث TAP مكافئًا لتأثير النقر في متصفح الكمبيوتر. على الرغم من أن حدث Click لا يزال متاحًا على أجهزة الشاشة التي تعمل باللمس ، إلا أنه سيكون هناك بعض التأخير في النقر على العديد من الأجهزة. إذا كنت ترغب في الرد بسرعة على أحداث "النقر" ، فأنت بحاجة إلى استخدام حدث Touch لتحقيقه.
نسخة الكود كما يلي:
var starttx ، startty ؛
element.addeventListener ('touchstart' ، function (e) {
var touches = e.touches [0] ؛
startTx = touches.clientx ؛
StartTy = touches.clienty ؛
}، خطأ شنيع )؛
element.addeventListener ('touchend' ، function (e) {
var touches = e.ChangedTouches [0] ،
endtx = touches.clientx ،
endty = touches.clienty ؛
// على بعض الأجهزة ، تكون أحداث اللمس أكثر حساسية ، مما يؤدي إلى تغيير بسيط في إحداثيات الحدث عند الضغط وإطلاق الإصبع.
if (math.abs (starttx - endtx) <6 && math.abs (startty - endty) <6) {
console.log ("الحدث الحارقة") ؛
}
}، خطأ شنيع )؛
حدث Doubletap
حدث DoubleTAP هو حدث يتم تشغيله عندما يقوم الإصبع بالشاشة مرتين في نفس نطاق الموضع وفي وقت قصير جدًا. في بعض المتصفحات ، يختار حدث DoubleTAP النص. إذا كنت لا ترغب في تحديد النص ، فيمكنك إضافة سمة CSS لاختيار المستخدم: لا شيء للعنصر.
نسخة الكود كما يلي:
var istouchend = false ،
آخر مرة = 0 ،
LACTTX = NULL ،
LastTy = NULL ،
FirstTouchend = صحيح ،
body = document.body ،
dtaptimer ، starttx ، startty ، startTime ؛
element.addeventListener ('touchstart' ، function (e) {
if (dtaptimer) {
ClearTimeout (dtaptimer) ؛
dtaptimer = null ؛
}
var touches = e.touches [0] ؛
startTx = touches.clientx ؛
StartTy = touches.clienty ؛
}، خطأ شنيع )؛
element.addeventListener ('touchend' ، function (e) {
var touches = e.ChangedTouches [0] ،
endtx = touches.clientx ،
endty = touches.clienty ،
الآن = date.now () ،
المدة = الآن - آخر مرة ؛
// أولاً ، تأكد من تشغيل حدث TOP واحد
if (math.abs (starttx - endtx) <6 && math.abs (starttx - endtx) <6) {
// تأكد من أن الفاصل الزمني بين الصنابين هو في حدود 500 مللي ثانية
إذا (المدة <301) {
// موضع هذا الصنبور وموضع النقر الأخير يسمح بالأخطاء في نطاق معين
if (lasttx! == null &&
Math.ABS (lasttx - endtx) <45 &&
Math.Abs (lastty - endty) <45) {
FirstTouchend = true ؛
LACTTX = LASTTY = NULL ؛
console.log ('Fire double Tap Event') ؛
}
}
آخر{
LACKTX = ENDTX ؛
LastTy = endty ؛
}
}
آخر{
FirstTouchend = true ؛
LACTTX = LASTTY = NULL ؛
}
آخر مرة = الآن ؛
}، خطأ شنيع )؛
// يصبع الإصبع على الشاشة بسرعة كبيرة على Safari iOS.
// هناك فرصة معينة ألا يتم الرد على أحداث TouchStart و Touchend للمرة الثانية
// في نفس الوقت ، لن تؤدي Touch Touch إلى تشغيل النقر
if (~ navigator.useragent.toLowerCase (). indexof ('iPhone OS')) {
body.addeventListener ('TouchStart' ، وظيفة (e) {
startTime = date.now () ؛
}، حقيقي )؛
body.addeventListener ('touchend' ، function (e) {
var nolongtap = date.now () - startTime <501 ؛
if (firstTouchend) {
FirstTouchend = false ؛
if (nolongtap && e.target === element) {
dtaptimer = setTimeOut (function () {
FirstTouchend = true ؛
LACTTX = LASTTY = NULL ؛
console.log ('Fire double Tap Event') ؛
} ، 400) ؛
}
}
آخر{
FirstTouchend = true ؛
}
}، حقيقي )؛
// لن يتم تشغيل حدث النقر عندما يقوم الإصبع على الشاشة عدة مرات على iOS.
element.addeventListener ('click' ، function (e) {
if (dtaptimer) {
ClearTimeout (dtaptimer) ؛
dtaptimer = null ؛
FirstTouchend = true ؛
}
}، خطأ شنيع )؛
}
حدث طويل
حدث Longtap هو حدث يتم تشغيله عندما يحمل الإصبع الشاشة لفترة طويلة ولا يزال غير متأثر.
نسخة الكود كما يلي:
var starttx ، startty ، ltaptimer ؛
element.addeventListener ('touchstart' ، function (e) {
إذا (ltaptimer) {
ClearTimeout (ltaptimer) ؛
ltaptimer = null ؛
}
var touches = e.touches [0] ؛
startTx = touches.clientx ؛
StartTy = touches.clienty ؛
ltaptimer = setTimeOut (function () {
console.log ('Fire Long Tap Event') ؛
} ، 1000) ؛
E.PreventDefault () ؛
}، خطأ شنيع )؛
element.addeventListener ('touchmove' ، function (e) {
var touches = e.touches [0] ،
endtx = touches.clientx ،
endty = touches.clienty ؛
if (ltaptimer && (math.abs (endtx - starttx)> 5 || math.abs (endty - startty)> 5)) {
ClearTimeout (ltaptimer) ؛
ltaptimer = null ؛
}
}، خطأ شنيع )؛
element.addeventListener ('touchend' ، function (e) {
إذا (ltaptimer) {
ClearTimeout (ltaptimer) ؛
ltaptimer = null ؛
}
}، خطأ شنيع )؛
حدث التمرير
حدث SWIPE هو حدث يتم تشغيله عندما تنزلق الإصبع على الشاشة. وهي مقسمة إلى swipeleft (يسار) ، swiperight (يمين) ، swipeup (لأعلى) ، و swipedown (أسفل).
نسخة الكود كما يلي:
var iStouchMove ، startTx ، StartTy ؛
element.addeventListener ('touchstart' ، function (e) {
var touches = e.touches [0] ؛
startTx = touches.clientx ؛
StartTy = touches.clienty ؛
iStouchMove = false ؛
}، خطأ شنيع )؛
element.addeventListener ('touchmove' ، function (e) {
iStouchMove = صحيح ؛
E.PreventDefault () ؛
}، خطأ شنيع )؛
element.addeventListener ('touchend' ، function (e) {
if (! iStouchMove) {
يعود؛
}
var touches = e.ChangedTouches [0] ،
endtx = touches.clientx ،
endty = touches.clienty ،
المسافة = starttx - endtx
المسافة = startty - endty ،
isswipe = false ؛
if (math.abs (quatex)> = Math.ABS (المسافة)) {
إذا (المسافة> 20) {
console.log ("الحدث اليسرى Fire Swipe") ؛
isswipe = صحيح ؛
}
آخر إذا (المسافة <-20) {
Console.log ("الحدث اليمين النار النار") ؛
isswipe = صحيح ؛
}
}
آخر{
إذا (المسافة> 20) {
console.log ("حدث النار في الحدث") ؛
isswipe = صحيح ؛
}
آخر إذا (المسافة <-20) {
console.log ("Fire Swipe Down Event") ؛
isswipe = صحيح ؛
}
}
إذا (isswipe) {
console.log ("حدث SWIPE الحريق") ؛
}
}، خطأ شنيع )؛
جميع الأحداث المحاكاة أعلاه مغلفة في أحادي. عنوان الرمز الكامل: https://github.com/chenmnkken/monoevent ، الأصدقاء الذين يحتاجون إليه ، يرجى إلقاء نظرة ~
ملاحظة: هنا أوصي بأداة استعلام عبر الإنترنت حول أحداث JS ، والتي تلخص أنواع الأحداث شائعة الاستخدام ووظائف JS:
قائمة كاملة من أحداث ووظائف JavaScript:
http://tools.vevb.com/table/javaScript_event