移動端如何獲取點擊座標

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