内裤总动员之移动端开始.移动.结束中获取X和Y轴坐标

     各位观众老爷大家好,欢迎收看内裤总动员之程序猿的IT程序大讲堂,今天给大家分享一下在移动端中如何去获取当前屏幕中的X轴和Y轴的问题. 废话不多说,代码伺候.

---

以下为JQ的获取方式.

$('#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;

}

---

以下为原生写法

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)

{

//...

}

顺带贴出常用的一句:阻止默认事件.通用方式

e.preventDefault();

好啦,关于获取坐标的知识点就简单的为大家介绍到这里啦. 感谢各位观众老爷的阅览,如有问题可以评论点评.  谢谢大家~~~~