移动端如何获取点击坐标

1、移动端获取点击坐标的方式说明

 

一、移动端和PC端在处理事件上有些不一样之处，首先事件上不一样，移动端这边是touchstart、touchmove、touchend这3个事件。

二、移动端因为是手指操做而非鼠标，因此存在多点触控，即多根手指在屏幕上触发事件。不能经过e.clientX来获取单个点坐标。

三、移动端 事件event中存在一个触控集合touches数组，经过取数组的第一个元素来获取坐标位置，即第一个触碰屏幕手指的坐标(e.touches[0].pageX , e.touches[0].pageY)。

四、有时须要获取所有触碰点的位置，那就要循环数组了，逐个处理。

五、有时要防止多点触碰，以及手指对屏幕进行缩放的影响，能够加入以上判断if(e.touches.length > 1 || e.scale && e.scale != 1)。

六、touchend事件，表明手指离开屏幕，此时不存在触控，因此e.touches这个数组的长度为0，也就不能在touchend的处理函数中获取pageX属性了。

 

 

2、HTML5 Canvas鼠标事件的使用实例

 

获取Canvas对象上的鼠标坐标

 

canvas.addEventListener("touchstart", function(e) {
    console.log(e.touches[0].pageX, e.touches[0].pageY);
});
canvas.addEventListener("touchmove", function(e) {
    if(e.touches.length > 1 || e.scale && e.scale !== 1) return;
    console.log(e.touches[0].pageX, e.touches[0].pageY);
});
canvas.addEventListener("touchend", function(e) {});

参考资料：移动端如何获取点击坐标   http://www.studyofnet.com/news/1189.html