移动端如何获取点击坐标

2019独角兽企业重金招聘Python工程师标准>>>

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

 

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

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

转载于:https://my.oschina.net/u/2428791/blog/653717