在移动端开发手指单击触发touchmove
我们给对象同时添加touchstart,touchmove,touchend事件的时候(比如滑屏),当对象的子级有点击事件touchstart时,也会触发到父级的touchmove事件,这是因为我们的手指单击时,手指与屏幕的接触面积过大,就会触发到touchmove事件,因此,我们需要单独封装一个单击函数
封装tab函数
function tap(el,fn){
var startPoint = {};
el.addEventListener('touchstart', function(e) {
var touch = e.changedTouches[0];
startPoint = {
x: touch.pageX,
y: touch.pageY
}
});
el.addEventListener('touchend', function(e) {
var touch = e.changedTouches[0];
var nowPoint = {
x: touch.pageX,
y: touch.pageY
};
var dis = {
x: Math.abs(nowPoint.x - startPoint.x),
y: Math.abs(nowPoint.y - startPoint.y)
}
if(dis.x < 5 && dis.y < 5){ //给一个范围值,当单击移动不超过5个像素时,认为是点击事件
fn.call(el,e);
}
});
}