Pada perangkat layar sentuh, beberapa gerakan yang relatif mendasar perlu diimplementasikan oleh enkapsulasi sekunder dari peristiwa sentuh.
Zepto adalah perpustakaan kelas dengan tingkat penggunaan yang relatif tinggi pada perangkat seluler, tetapi beberapa peristiwa yang disimulasikan oleh modul sentuhnya memiliki beberapa masalah kompatibilitas, seperti peristiwa tap yang memiliki bug penetrasi peristiwa pada beberapa perangkat Android, dan jenis peristiwa lainnya juga memiliki masalah kompatibilitas yang lebih atau kurang.
Jadi, saya hanya merangkum peristiwa gerakan yang umum digunakan ini sendiri. Karena tidak ada banyak perangkat nyata untuk diuji, mungkin ada beberapa masalah kompatibilitas. Kode berikut hanya diuji di beberapa browser yang lebih umum di iOS 7 dan Andorid 4.
Acara Ketuk
Acara tap setara dengan efek klik di browser PC. Meskipun acara klik masih tersedia di perangkat layar sentuh, akan ada beberapa penundaan klik pada banyak perangkat. Jika Anda ingin merespons dengan cepat untuk "klik" acara, Anda perlu menggunakan acara Touch untuk mencapainya.
Salinan kode adalah sebagai berikut:
var starttx, startty;
element.addeventListener ('touchstart', function (e) {
var touches = e.touches [0];
startTx = touch.clientx;
startty = touches.clienty;
}, PALSU );
element.addeventListener ('touchend', function (e) {
var touches = e.changedtouches [0],
endtx = touch.clientx,
Endty = Touches.Clienty;
// Pada beberapa perangkat, acara sentuh lebih sensitif, menghasilkan sedikit perubahan dalam koordinat acara saat menekan dan melepaskan jari.
if (math.abs (starttx - endtx) <6 && math.abs (startty - endty) <6) {
console.log ('acara ketukan api');
}
}, PALSU );
Acara DoubleTap
Acara DoubleTap adalah peristiwa yang dipicu ketika jari mengetuk layar dua kali dalam kisaran posisi yang sama dan dalam waktu yang sangat singkat. Di beberapa browser, acara DoubleTap memilih teks. Jika Anda tidak ingin memilih teks, Anda dapat menambahkan atribut CSS dari User-Select: Tidak ada ke elemen.
Salinan kode adalah sebagai berikut:
var isTouchend = false,
terakhir kali = 0,
lasttx = null,
Lastty = null,
firstTouchend = true,
body = document.body,
dTaptimer, starttx, startty, startTime;
element.addeventListener ('touchstart', function (e) {
if (dTaptimer) {
ClearTimeout (DTapTimer);
dTaptimer = null;
}
var touches = e.touches [0];
startTx = touch.clientx;
startty = touches.clienty;
}, PALSU );
element.addeventListener ('touchend', function (e) {
var touches = e.changedtouches [0],
endtx = touch.clientx,
endty = touches.clienty,
sekarang = date.now (),
durasi = sekarang - terakhir;
// Pertama, pastikan bahwa satu peristiwa tap dapat dipicu
if (math.abs (starttx - endtx) <6 && math.abs (startTx - endtx) <6) {
// Pastikan interval antara dua ketukan dalam waktu 500 milidetik
if (durasi <301) {
// Posisi keran ini dan posisi tap terakhir memungkinkan kesalahan dalam kisaran tertentu
if (lasttx! == null &&
Math.abs (lasttx - endtx) <45 &&
Math.abs (Lastty - Endty) <45) {
firstTouchend = true;
lasttx = lastty = null;
Console.log ('Fire Double Tap Event');
}
}
kalau tidak{
lasttx = endtx;
Lastty = endty;
}
}
kalau tidak{
firstTouchend = true;
lasttx = lastty = null;
}
terakhir kali = sekarang;
}, PALSU );
// Jari mengetuk layar terlalu cepat di iOS Safari.
// Ada kemungkinan tertentu bahwa acara TouchStart dan Touchend tidak akan ditanggapi untuk kedua kalinya
// Pada saat yang sama, sentuhan jari tidak akan memicu klik
if (~ navigator.useragent.tolowercase (). IndexOf ('iPhone OS')) {
body.addeventListener ('touchstart', function (e) {
startTime = date.now ();
}, BENAR );
body.addeventListener ('touchend', function (e) {
var noLongTap = date.now () - startTime <501;
if (firstTouchend) {
firstTouchend = false;
if (noLongTap && e.target === elemen) {
dTapTimer = setTimeout (function () {
firstTouchend = true;
lasttx = lastty = null;
Console.log ('Fire Double Tap Event');
}, 400);
}
}
kalau tidak{
firstTouchend = true;
}
}, BENAR );
// Acara klik tidak akan dipicu saat jari mengetuk layar beberapa kali di iOS.
element.addeventListener ('klik', fungsi (e) {
if (dTaptimer) {
ClearTimeout (DTapTimer);
dTaptimer = null;
firstTouchend = true;
}
}, PALSU );
}
Acara Longtap
Acara Longtap adalah peristiwa yang dipicu ketika jari memegang layar untuk waktu yang lama dan tetap tidak tergerak.
Salinan kode adalah sebagai berikut:
var starttx, startty, ltaptimer;
element.addeventListener ('touchstart', function (e) {
if (ltaptimer) {
ClearTimeout (ltaptimer);
ltaptimer = null;
}
var touches = e.touches [0];
startTx = touch.clientx;
startty = touches.clienty;
lTapTimer = setTimeout (function () {
console.log ('acara Fire Long Tap');
}, 1000);
e.preventdefault ();
}, PALSU );
element.addeventListener ('touchmove', function (e) {
var touches = e.touches [0],
endtx = touch.clientx,
Endty = Touches.Clienty;
if (ltaptimer && (math.abs (endtx - starttx)> 5 || math.abs (endty - startty)> 5)) {
ClearTimeout (ltaptimer);
ltaptimer = null;
}
}, PALSU );
element.addeventListener ('touchend', function (e) {
if (ltaptimer) {
ClearTimeout (ltaptimer);
ltaptimer = null;
}
}, PALSU );
Uji gesek
Acara gesek adalah acara yang dipicu ketika jari meluncur di layar. Ini dibagi menjadi swipeleft (kiri), swiperight (kanan), swipeup (atas), dan swipedown (bawah).
Salinan kode adalah sebagai berikut:
var istouchmove, starttx, startty;
element.addeventListener ('touchstart', function (e) {
var touches = e.touches [0];
startTx = touch.clientx;
startty = touches.clienty;
iStouchMove = false;
}, PALSU );
element.addeventListener ('touchmove', function (e) {
iStouchMove = true;
e.preventdefault ();
}, PALSU );
element.addeventListener ('touchend', function (e) {
if (! iStouchmove) {
kembali;
}
var touches = e.changedtouches [0],
endtx = touch.clientx,
endty = touches.clienty,
distarx = starttx - endtx
jarak = startty - endty,
isswipe = false;
if (math.abs (distarx)> = math.abs (jarak)) {
if (distarx> 20) {
Console.log ('Acara Left Fire Swipe');
isswipe = true;
}
lain if (distarx <-20) {
Console.log ('Acara Sapuan Kanan Fire');
isswipe = true;
}
}
kalau tidak{
if (jarak> 20) {
Console.log ('Fire Swipe Up Event');
isswipe = true;
}
lain jika (jarak <-20) {
console.log ('acara sapuan api');
isswipe = true;
}
}
if (isSwipe) {
console.log ('acara sapuan api');
}
}, PALSU );
Semua peristiwa yang disimulasikan di atas dienkapsulasi dalam monoevent. Alamat kode lengkap: https://github.com/chenmnkken/monoevent, teman -teman yang membutuhkannya, tolong lihat ~
PS: Di sini saya merekomendasikan alat kueri online tentang acara JS, yang merangkum jenis acara yang umum digunakan dan fungsi fungsi JS:
Daftar lengkap acara dan fungsi JavaScript:
http://tools.vevb.com/table/javascript_event