Таким образом, я немного углубился в эту проблему.
Я изменил скрипт свайпа, чтобы добавить и порог расстояния, и порог времени.
Поэтому, чтобы выполнить свайп, нужно коснуться движения.более 150 пикселей и должно быть меньше 600 мс по времени.
Логика срабатывает только после события touchend / mouseup.
Перетаскивание все равно начнется, несмотря ни на что, но оно работает намного плавнее с новымscript.
События касания сопоставляются с событиями мыши с помощью этого - jquery.ui.touch.js
Вот сценарий смахивания:
(function($) {
$.fn.swipe = function(settings) {
var config = {
left: function() { },
right: function() { },
preventDefault: true
};
if (settings) $.extend(config, settings);
this.each(function() {
var startX;
var currentX;
var startTime = false;
var isMoving = false;
function onTouchStart(e) {
if (!isMoving && e.touches.length > 0) {
if(config.preventDefault) {
e.preventDefault();
}
startTime = new Date().getTime();
startX = e.touches[0].pageX;
currentX = startX;
isMoving = true;
this.addEventListener('touchmove', onTouchMove, false);
}
}
function onTouchMove(e) {
if(config.preventDefault) {
e.preventDefault();
}
if (isMoving) {
currentX = e.touches[0].pageX;
}
}
function onTouchEnd() {
this.removeEventListener('touchmove', onTouchMove);
var endTime = new Date().getTime();
var time = endTime - startTime;
var endX = currentX;
var distanceX = endX - startX;
if(Math.abs(distanceX) > 150 && time < 600) {
if(distanceX < 0) {
config.left();
}
else {
config.right();
}
reset();
}
else {
reset();
}
}
function reset() {
startX = null;
currentX = null;
startDate = false;
isMoving = false;
}
this.addEventListener('touchstart', onTouchStart, false);
this.addEventListener('touchend', onTouchEnd, false);
});
return this;
};
})(jQuery);
Вот как это использовать на странице:
<script>$(document).swipe({ right:function(){ $('#previous').click(); }, left:function(){$('#next').click(); } });</script>