js的touch事件与浏览器的滑动冲突怎么办
做手机端用touch事件会比鼠标事件要快,但是当手机端滑动页面时会触发某些元素的touch事件,但也许用户并不想点击,应该怎么解决
jquery web前端开发 html5 JavaScript 手机端
AC米兰
9 years, 10 months ago
Answers
zepto提供了一个tap事件,具体原理大概是
元素touchend的时候,判断是否触发了touchmove事件
下面代码只是我自己想着写的,并非zepto源码
$.fn.tap = function(fun){
var x,y,X,Y,moved ;
element.addEventListener('touchstart',function(event){
moved = false ; // moved用于判断是否滑动
x = event.targetTouches[0].screenX ;
y = event.targetTouches[0].screenY ;
});
element.addEventListener('touchmove',function(event){
if(moved) return
X = event.targetTouches[0].screenX ;
Y = event.targetTouches[0].screenY ;
if(X-x != 0 || Y-y !=0) moved = true
});
element.addEventListener('touchend',function(event){
if(!moved) // 如果没有滑动就执行
{
fun();
}
})
}
sunny57
answered 9 years, 10 months ago