jquery touch事件解析及方向判断
介绍:
touch事件在jQuery的高版本 用on来实现 $('div').on('touchstart', function(e) { …… });
touchstart 触摸开始的时候触发
touchmove 手指在屏幕上滑动的时候触发
touchend 触摸结束的时候触发
touches 当前位于屏幕上的所有手指列表(返回的是一个数组)
targetTouches 位于当前DOM元素上所有的手指列表(返回的也是一个数组)
changedTouches 涉及当前事件手指的列表(发生变化的触点)
identifier 一个数值,唯一标识触摸会话(touch session)中的当前手指。一般从0开始的流水号
target DOM元素,是动作所针对的目标
// 手指在Body中点击时的记录
$("body").on("touchstart", function(e) {
startX = e.originalEvent.changedTouches[0].pageX; // 记录 最初点击时第一个触摸点的x坐标
startY = e.originalEvent.changedTouches[0].pageY; // 记录 最初点击时第一个触摸点的y坐标
console.log(e);
});
// 阻止touchmove时的body默认事件
$('body').on('touchmove', function(e) {
e.preventDefault();
});
// 记录/操作 当手指离开的操作
$("body").on("touchend", function(e) {
var moveEndX = e.originalEvent.changedTouches[0].pageX; // 手指离开时的x坐标
var moveEndY = e.originalEvent.changedTouches[0].pageY; // 手指离开时的y坐标
var X = moveEndX - startX; // 离开时的x坐标 - 开始触摸的x坐标 = 横向偏移值
var Y = moveEndY - startY; // 离开时的y坐标 - 开始触摸的y坐标 = 纵向偏移值
if ( Math.abs(X) > Math.abs(Y) && X > 0 ) { // 从左到右
alert("left 2 right");
}
else if ( Math.abs(X) > Math.abs(Y) && X < 0 ) { // 从右到左
alert("right 2 left");
}
else if ( Math.abs(Y) > Math.abs(X) && Y > 0) { // 从上到下
alert("top 2 bottom");
}
else if ( Math.abs(Y) > Math.abs(X) && Y < 0 ) { // 从下到上
alert("bottom 2 top");
}
else{
alert("just touch");
}
});
js使用touch事件
document.addEventListener("touchstart", function() {}, false); // false- 默认。事件句柄在冒泡阶段执行