На устройствах сенсорного экрана некоторые относительно основные жесты должны быть реализованы путем вторичной инкапсуляции сенсорных событий.
Zepto - это библиотека классов с относительно высокими показателями использования на мобильных устройствах, но некоторые события, имитируемые его сенсорным модулем, имеют некоторые проблемы с совместимостью, такие как события TAP, имеющие ошибки проникновения событий на некоторых устройствах Android, и другие типы событий также имеют более или менее проблемы совместимости.
Итак, я просто инкапсулировал эти часто используемые события жеста. Поскольку существует не так много реальных устройств для тестирования, могут возникнуть некоторые проблемы с совместимостью. Следующий код тестируется только в некоторых более распространенных браузерах на iOS 7 и Andorid 4.
Нажмите на событие
Событие TAP эквивалентно эффекту щелчка в браузере ПК. Несмотря на то, что событие Click по -прежнему доступно на устройствах сенсорного экрана, в нем будут некоторые задержки на многих устройствах. Если вы хотите быстро реагировать на события «щелкнуть», вам нужно использовать событие Touch для его достижения.
Кода -копия выглядит следующим образом:
var starttx, startty;
element.addeventListener ('touchStart', function (e) {
Var touchs = e.touches [0];
startTx = touches.clientx;
startty = touchs.clienty;
}, ЛОЖЬ );
element.addeventListener ('touchend', function (e) {
var touchs = e.changedtouches [0],
endtx = touchs.clientx,
endty = touchs.clienty;
// На некоторых устройствах события прикосновения более чувствительны, что приводит к небольшому изменению координат событий при нажатии и выпуске пальца.
if (math.abs (starttx - endtx) <6 && math.abs (startty - endty) <6) {
console.log ('Fire Tap Event');
}
}, ЛОЖЬ );
Doubletap Event
Событие Doubletap - это событие, которое запускается, когда пальцем дважды нажимает на экран в одном и том же диапазоне положения и за очень короткое время. В некоторых браузерах событие Doubletap выбирает текст. Если вы не хотите выбирать текст, вы можете добавить атрибут CSS Select: нет в элемент.
Кода -копия выглядит следующим образом:
var IStouchend = false,
в прошлое время = 0,
lasttx = null,
Последний = null,
FirstTouchend = true,
body = document.body,
dtaptimer, starttx, startty, starttime;
element.addeventListener ('touchStart', function (e) {
if (dtaptimer) {
ClearTimeout (dtaptimer);
dtaptimer = null;
}
Var touchs = e.touches [0];
startTx = touches.clientx;
startty = touchs.clienty;
}, ЛОЖЬ );
element.addeventListener ('touchend', function (e) {
var touchs = e.changedtouches [0],
endtx = touchs.clientx,
endty = touchs.clienty,
Теперь = date.now (),
Продолжительность = сейчас - прошлое;
// сначала убедитесь, что одно событие TAP можно запустить
if (math.abs (starttx - endtx) <6 && math.abs (starttx - endtx) <6) {
// Убедитесь, что интервал между двумя кранами находится в пределах 500 миллисекунд
if (продолжительность <301) {
// положение этого нажатия и положение последнего нажатия разрешают ошибки в определенном диапазоне
if (lasttx! == null &&
Math.abs (lasttx - endtx) <45 &&
Math.abs (lastty - endty) <45) {
FirstTouchend = true;
lasttx = lastty = null;
console.log ('Fire Double Tap Event');
}
}
еще{
lasttx = endtx;
lastty = endty;
}
}
еще{
FirstTouchend = true;
lasttx = lastty = null;
}
прошлое = сейчас;
}, ЛОЖЬ );
// Палец слишком быстро нажимает на экран на сафари для iOS.
// есть определенный шанс, что события TouchStart и Touchend не будут реагировать во второй раз
// в то же время, пальцем не запускает щелчок
if (~ navigator.useragent.tolowercase (). Indexof ('iPhone OS')) {
body.addeventlistener ('touchstart', function (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;
lasttx = lastty = null;
console.log ('Fire Double Tap Event');
}, 400);
}
}
еще{
FirstTouchend = true;
}
}, истинный );
// Событие Click не будет запущено, когда пальцем несколько раз нажимает на экран на iOS.
element.addeventlistener ('click', function (e) {
if (dtaptimer) {
ClearTimeout (dtaptimer);
dtaptimer = null;
FirstTouchend = true;
}
}, ЛОЖЬ );
}
Событие Лонгтапа
Событие Longtap - это событие, которое запускается, когда пальцем долго удерживает экран и остается неизменным.
Кода -копия выглядит следующим образом:
var starttx, startty, ltaptimer;
element.addeventListener ('touchStart', function (e) {
if (ltaptimer) {
ClearTimeout (LTAPTIMER);
ltaptimer = null;
}
Var touchs = e.touches [0];
startTx = touches.clientx;
startty = touchs.clienty;
ltaptimer = settimeout (function () {
console.log ('Fire Long Tap Event');
}, 1000);
e.preventdefault ();
}, ЛОЖЬ );
element.addeventlistener ('touchmove', function (e) {
var touchs = e.touches [0],
endtx = touchs.clientx,
endty = touchs.clienty;
if (ltaptimer && (math.abs (endtx - starttx)> 5 || math.abs (endty - startty)> 5)) {
ClearTimeout (LTAPTIMER);
ltaptimer = null;
}
}, ЛОЖЬ );
element.addeventListener ('touchend', function (e) {
if (ltaptimer) {
ClearTimeout (LTAPTIMER);
ltaptimer = null;
}
}, ЛОЖЬ );
Свигательство события
Событие Swipe - это событие, запускаемое, когда пальцы скользят на экране. Он разделен на Swipeleft (слева), Swiperight (справа), смачивание (вверх) и смахивание (вниз).
Кода -копия выглядит следующим образом:
var istouchmove, starttx, startty;
element.addeventListener ('touchStart', function (e) {
Var touchs = e.touches [0];
startTx = touches.clientx;
startty = touchs.clienty;
istouchmove = false;
}, ЛОЖЬ );
element.addeventlistener ('touchmove', function (e) {
istouchmove = true;
e.preventdefault ();
}, ЛОЖЬ );
element.addeventListener ('touchend', function (e) {
if (! istouchmove) {
возвращаться;
}
var touchs = e.changedtouches [0],
endtx = touchs.clientx,
endty = touchs.clienty,
Distancex = startTX - endtx
Distance = Startty - Endty,
isswipe = false;
if (math.abs (distancex)> = math.abs (distamy)) {
if (distancex> 20) {
console.log («Огненное переживание влево событие»);
isswipe = true;
}
иначе if (distancex <-20) {
console.log ('Fire Swipe Right Event');
isswipe = true;
}
}
еще{
if (дистанция> 20) {
console.log («Огненное событие»);
isswipe = true;
}
иначе if (Distamy <-20) {
console.log («Огненное событие вниз»);
isswipe = true;
}
}
if (iSswipe) {
console.log ('Fire Swipe Event');
}
}, ЛОЖЬ );
Все события, смоделированные выше, инкапсулируются в моноэвент. Полный кодовый адрес: https://github.com/chenmnkken/monoevent, друзья, которые это нужно, пожалуйста, посмотрите ~
PS: Здесь я рекомендую инструмент онлайн -запроса о событиях JS, который суммирует широко используемые типы событий и функции функций JS:
Полный список событий и функций JavaScript:
http://tools.vevb.com/table/javascript_event