手机网站判断触摸方向(上下左右)
2019-06-14 14:0
$(function() {
function mytouch() {
var startx;//让startx在touch事件函数里是全局性变量。
var endx;
var el = document.getElementById('io');//触摸区域。
function leftright() { //独立封装这个事件可以保证执行顺序,从而能够访问得到应该访问的数据。
if (startx > endx) { //判断左右移动程序
//left
alert(1);
} else {
alert(2);
//right
}
}
function topbottom() { //独立封装这个事件可以保证执行顺序,从而能够访问得到应该访问的数据。
if (starty > endy) { //判断上下移动程序
//top
} else {
//bottom
}
}
el.addEventListener('touchstart', function (e) {
var touch = e.changedTouches;
startx = touch[0].clientX;
starty = touch[0].clientY;
});
el.addEventListener('touchend', function (e) {
var touch = e.changedTouches;
endx = touch[0].clientX;
endy = touch[0].clientY;
leftright(); //startx endx 的数据收集应该放在touchend事件后执行,而不是放在touchstart事件里执行,这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的,所以在此函数中都可以访问得到,所以只需要注意事件执行的先后顺序即可。
topbottom();
});
}
mytouch();
})