您的位置:首页 > Web前端 > 其它

移动端获取点击坐标

更多 2016/3/30 来源:Web前端学习浏览量:2969
学习标签: Web移动端
本文导读:PC是通过鼠标点击和移动,可以直接通过事件的clientX和clientY来获取点击的坐标,这个坐标(e.clientX , e.clientY)是相对于window的左上角来确定的。移动端由于是手指操作而非鼠标,所以存在多点触控,即多根手指在屏幕上触发事件,那么,手指在屏幕上移动,怎么获取到当前手指点击的坐标呢?

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

 

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

 

收藏
293
很赞
119