我需要检测向右滑动并在手机上向左滑动,同时还允许向上/向下滚动。
这适用于iPhone,但不适用于Android。基本上,选择似乎是滚动或滑动。
我已尝试过jquery mobile和http://www.netcu.de/jquery-touchwipe-iphone-ipad-library。
这里http://wilsonpage.co.uk/touch-events-in-chrome-android/得出结论"为了达到预期的效果,我现在必须使用合成的JavaScript驱动滚动进行水平平移和滑动以及垂直滚动。"
是否有人提出另一种解决方案或有任何库来处理这个问题?
我尝试更改netCU代码以更改是否调用e.preventDefault(),因为这似乎是相关的。没运气。滑动不适用于以下代码。
(function($) {
$.fn.touchwipe = function(settings) {
min_move_x = 30;
min_move_y = 20;
var config = {
wipeLeft: function() { },
wipeRight: function() { }
};
if (settings) $.extend(config, settings);
this.each(function() {
var startX;
var startY;
var isMoving = false;
function cancelTouch() {
this.removeEventListener('touchmove', onTouchMove);
startX = null;
isMoving = false;
}
function onTouchMove(e) {
if(isMoving) {
var x = e.touches[0].pageX;
var y = e.touches[0].pageY;
var dx = startX - x;
var dy = startY - y;
if(Math.abs(dx) >= min_move_x) {
e.preventDefault();
cancelTouch();
if(dx > 0) {
config.wipeLeft();
}
else {
config.wipeRight();
}
}
else if(Math.abs(dy) >= min_move_y) {
cancelTouch();
}
}
}
function onTouchStart(e)
{
if (e.touches.length == 1) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
isMoving = true;
this.addEventListener('touchmove', onTouchMove, false);
}
}
if ('ontouchstart' in document.documentElement) {
this.addEventListener('touchstart', onTouchStart, false);
}
});
return this;
};
})(jQuery);
$("html").touchwipe({
wipeLeft: function() { alert("left"); },
wipeRight: function() { alert("right"); },
});