移动端获取点击坐标

移动端获取点击坐标

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

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

2、移动端由于是手指操作而非鼠标，所以存在多点触控，即多根手指在屏幕上触发事件。不能通过e.clientX来获取单个点坐标。

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

4、有时需要获取全部触碰点的位置，那就要循环数组了，逐个处理。

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

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

二、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) ...{});