码迷,mamicode.com
首页 > 其他好文 > 详细

获取touchstart,touchmove,touchend 坐标

时间:2017-08-08 20:49:02      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:==   move   hang   代码   第一个   function   获取   jquer   chm   

简单说下如何用jQuery 和 js原生代码获取touchstart,touchmove,touchend 坐标值:

jQuery 代码:

$(‘#id‘).on(‘touchstart‘,function(e) {
    var _touch = e.originalEvent.targetTouches[0];
    var _x= _touch.pageX;
});
 
$(‘#id‘).on(‘touchmove‘,function(e) {
    var _touch = e.originalEvent.targetTouches[0];
    var _x= _touch.pageX;
});
 
$(‘#id‘).on(‘touchend‘,function(e) {
    var _touch = e.originalEvent.changedTouches[0];
    var _x= _touch.pageX;
}

 

js原生代码

document.getElementById("id").addEventListener("touchstart",function(e)
{
    var _x=e.touches[0].pageX;
    var _y=e.touches[0].pageY;
    console.log("start",_x)
})
document.getElementById("id").addEventListener("touchmove",function(e)
{
    var _x=e.touches[0].pageX;
    var _y=e.touches[0].pageY;
    console.log("move",_x)
})
document.getElementById("id").addEventListener("touchend",function(e)
{
    var _x=e.changedTouches[0].pageX;
    var _y=e.changedTouches[0].pageY;
    console.log("end",_x)
})

 

以上两种办法中 touchend 需要使用changedTouches[0]。

一般我们取第一个手指的坐标,如果有其他要求,可能需要判断手指数量。

if (e.targetTouches.length == 1)
{
  //...
}

 

获取touchstart,touchmove,touchend 坐标

标签:==   move   hang   代码   第一个   function   获取   jquer   chm   

原文地址:http://www.cnblogs.com/sese/p/7308750.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!