移动端判断手势左右滑理解
程序员文章站
2024-03-24 20:59:40
...
//给元素绑定手势事件
var bindSwipeEvent = function(dom,leftcallback,rightcallback){
//手势的判断条件
1.假如必须滑动过
2.滑动的距离必须超出50px
//在touchstart中的client
var startX = 0;
//touchstartX和touchmoveX之间的距离
var distanceX = 0;
//判断是否移动过
var ismove = false;
dom.addEventListener('touchstart',function(e){
startX = e.touches[0].clientX;
})
dom.addEventListner('touchmove',function(e){
//确定手势已经有了移动
ismove = true;
var moveX = e.touches[0].clientX;
distanceX = moveX - startX;
})
dom.addEventListener('touchend',function(e){
//滑动结束
if(ismove && Math.abs(distanceX > 50)){
if(distanceX > 0){
//左滑手势
rightcallback && rightcallback.call(tis,e);
}else{
//右滑手势
leftcallback && leftcallback.call(this,e);
}
}
//为了严谨,重置参数
startX = 0;
ismove = 0;
distance = 0;
});
}
//调用的时候直接绑定元素,传入参数即可
bindSwipeEvent();
上一篇: Android动画用法大全总结