移动端触控事件封装（完整版）

最新推荐文章于 2023-02-14 11:45:34 发布

akx95428

最新推荐文章于 2023-02-14 11:45:34 发布

阅读量129

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/Greenzgz/p/4741963.html

版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery插件</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.1.min.js"></script>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

obj.addEventListener('touchstart',function(event)
{ //触控开始

startx = event.touches[0].pageX;
starty = event.touches[0].pageY;

},false);

obj.addEventListener('touchmove',function(event)
{
event.preventDefault();
movex = event.touches[0].pageX;
movey = event.touches[0].pageY;

obj.innerHTML='x:'+Math.abs(movex)+',y:'+Math.abs(movey);

if(json.swipe)
{
json.swipe();
}

},false);

obj.addEventListener('touchend',function(event)
{ //触控结束
endx = event.changedTouches[0].pageX;
endy = event.changedTouches[0].pageY;

var deltax = endx - startx;
var deltay = endy - starty;

if( Math.abs( deltax ) < 30 && Math.abs( deltay ) < 30 )//当滑动的距离小于30px的时候不做滑动
return;

if( Math.abs( deltax ) >= Math.abs( deltay ) )// 当滑动的X轴距离大于，Y轴的滑动距离->则是水平滑动，否则就是垂直滑动
{
if( deltax > 0 )//触控结束的X轴坐标大于触控开始的X轴坐标就是向右滑动，否则就是向左滑动
{
if(json.right) json.right();
}
else{
if(json.left) json.left();
}
}else{

if( deltay > 0 )//触控结束的Y轴坐标大于触控开始的Y轴坐标就是向下滑动，否则就是向上滑动（这里要注意移动设备上的Y轴的正坐标是向下的。）
{
if(json.down) json.down();
}else{
if(json.up) json.up();
}
}
},false);
};

}})(jQuery)

$(function(){

var oDiv=$('.zgz');

oDiv.moveTach({

up:function(){alert('你刚才向上移动了')},

down:function(){ alert('你刚才向下移动了')},

left:function(){ alert('你刚才向左移动了')},

right:function(){alert('你刚才向右移动了')},

//swipe:function(){alert('滑动了')}

})
})

</script>

<style>

.zgz{ width:100%; height:100px; background:#f00; margin: 10px }

</style>

</head>

<body>

</body>
</html>

转载于:https://www.cnblogs.com/Greenzgz/p/4741963.html

akx95428

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端触控事件封装（完整版）

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery插件</title><script src="http://ajax.aspnetcdn.co...
复制链接

扫一扫