移動端-獲取觸摸點的位置
原文指路： https://www.cnblogs.com/le220/p/8127998.html
一、移動端輪播圖滑動
1、先獲取手指在輪播圖元素上的滑動方向(左右)
（1）手指觸摸開始時記錄手指所在的坐標X （2）獲取界面上的輪播圖容器
var $carousels=$('.carousel');
（3）注冊滑動事件
（4）變量重復賦值
（5）結束觸摸的一瞬間記錄最后手指所在坐標X
（6）比較開始和結束的坐標大小
（7）控制精度 獲取每次手指滑動的距離，當距離大於一定值時，就認為有方向變化
2、根據獲得到的方向選擇上一張或下一張
必須用$(this),若使用$carousels,當頁面中有多個輪播圖時，會一起動 $(this).carousel(startX>endX?'next':'prev');
javascript代碼
1 //移動端輪播圖滑動
2
3 //1、先獲取手指在輪播圖元素上的滑動方向(左右)
4 //手指觸摸開始時記錄手指所在的坐標X
5
6 //獲取界面上的輪播圖容器
7 var $carousels=$('.carousel');
8 //注冊滑動事件
9 var startX;
10 var endX;
11 var offset=50;
12 $carousels.on('touchstart',function(e){
13 startX=e.originalEvent.touches[0].clientX;
14 console.log(startX);
15 });
16
17 //變量重復賦值
18 $carousels.on('touchmove',function(e){
19 endX=e.originalEvent.touches[0].clientX;
20 //console.log(endX);
21 });
22
23 //結束觸摸的一瞬間記錄最后手指所在坐標X
24 //比較開始和結束的坐標大小
25 $carousels.on('touchend',function(e){
26 console.log(endX);
27 //控制精度
28 //獲取每次手指滑動的距離，當距離大於一定值時，就認為有方向變化
29 var distance=Math.abs(startX-endX);
30 if(distance>offset){
31 //有方向變化
32 //console.log(startX>endX?'-':'+');
33
34 //2、根據獲得到的方向選擇上一張或下一張
35
36 // $('a').click();
37 // 原生的carousel方法實現 手向左滑出現下一張
38 //此處必須用$(this),若使用$carousels,當頁面中有多個輪播圖時，會一起動
39 $(this).carousel(startX>endX?'next':'prev');
40
41
42
43 }
二、移動端獲取觸摸點的方式說明
1.
touchstart事件
手指頭觸摸屏幕上的事件
2.
touchmove
手指頭在屏幕上滑動觸發的事件
3.
touchend
當手指從屏幕上離開的時候觸發
利用jquery配合使用方法如下：
$("#demoid").bind('touchstart',function(){ //代碼處理});
touchstart、touchmove、touchend三種事件下的鼠標位置點獲取：
（1）
touchstart事件下獲取：
e.originalEvent.targetTouches[0].pageX
說明：由於手指頭是多點觸摸到屏幕上的我們所以e.originalEvent.targetTouches的
意思是一個手指觸碰點集合我們只需要獲取第一個點就可以了所以
e.originalEvent.targetTouches[0]，所以位置.pageX .pageY就ok了
（2）
touchend事件的獲取：
e3.originalEvent.changedTouches[0].pageX
下面是其他的一些介紹：
每個Touch對象包含的屬性如下。
clientX：觸摸目標在視口中的x坐標。
clientY：觸摸目標在視口中的y坐標。
identifier：標識觸摸的唯一ID。
pageX：觸摸目標在頁面中的x坐標。
pageY：觸摸目標在頁面中的y坐標。
screenX：觸摸目標在屏幕中的x坐標。
screenY：觸摸目標在屏幕中的y坐標。
target：觸目的DOM節點目標。
幾個坐標區別（不同瀏覽器下）
https://blog.csdn.net/lzding/article/details/45437707
（firefox 瀏覽器中， offsetX 為 undefined）。firefox 獲取 offsetX / offsetY 的值，需要通過 event 對象的屬性 originalEvent。