移動端

一酗昼、定義

觸摸事件類型

touchstart：手指觸摸到一個 DOM 元素時觸發(fā)。
touchmove：手指在一個 DOM 元素上滑動時觸發(fā)麻削。
touchend：手指從一個 DOM 元素上移開時觸發(fā)。
touchcancel 當一些更高級別的事件發(fā)生的時候（如電話接入或者彈出信息）會取消當前的touch操作叠荠，即觸發(fā)touchcancel扫责。一般會在touchcancel時暫停游戲、存檔等操作。

二抡笼、接口

TouchEvent

TouchEvent的屬性繼承了 UIEvent 和 Event黄鳍。
其中三個主要屬性：
TouchEvent.changedTouches：一個 TouchList對象，包含了代表所有從上一次觸摸事件到此次事件過程中拾碌，狀態(tài)發(fā)生了改變的觸點的 Touch對象街望。

TouchEvent.targetTouches： 一個 TouchList 對象，是包含了如下觸點的 Touch 對象：觸摸起始于當前事件的目標 element 上灾前，并且仍然沒有離開觸摸平面的觸點。

TouchEvent.touches： 一 個 TouchList 對象蔫敲，包含了所有當前接觸觸摸平面的觸點的 Touch 對象炭玫，無論它們的起始于哪個 element 上，也無論它們狀態(tài)是否發(fā)生了變化吞加。

TouchList

一個TouchList代表一個觸摸屏幕上所有觸點的列表。
事件對應的三個列表包含了當前事件的一些相關信息叶圃，比如：一些坐標信息践图。

Touch

?Touch
1、屬性

TouchList

三座享、示例：

1、拖拽元素

思路：

獲取按下時和選中元素的坐標渣叛。獲取相對于元素偏移的位置。根據(jù)當前的按下的位置減去元素偏移的位置蘑秽。得到元素拖拽后的位置箫攀。在利用CSS定位和left、top屬性實現(xiàn)滑動的效果靴跛。

var moveElem = document.querySelector('.move'); //待拖拽元素      
var dragging; //是否激活拖拽狀態(tài)
var tLeft, tTop;
moveElem.addEventListener("touchstart", function (e) {
      dragging = true;
      var moveElemRect = moveElem.getBoundingClientRect();
      tLeft = e.touches[0].pageX - moveElemRect.left; //按下時和選中元素的坐標偏移:x坐標
      tTop = e.touches[0].pageY - moveElemRect.top; //按下時和選中元素的坐標偏移:y坐標
});
moveElem.addEventListener('touchmove', function(e) {
      if (dragging) {
          var moveX = e.touches[0].pageX - tLeft, 
                moveY = e.touches[0].pageY - tTop;
          moveElem.style.left = moveX + 'px';
          moveElem.style.top = moveY + 'px';
      }
});
moveElem.addEventListener('touchend', function(e) {
      dragging = false;
});

getBoundingClientRect:Element.getBoundingClientRect() 方法返回元素的大小及其相對于視口的位置梢睛。

2、長按

思路：

在touchstart中開啟一個定時器扬绪，比如在700ms后顯示一個長按菜單
在touchend中清除這個定時器，這樣如果按下的時間超過700ms，那么長按菜單已經(jīng)顯示出來了种蘸，清除定時器不會有任何影響；如果按下的時間小于700ms诫硕，那么touchstart中的長按菜單還沒來得及顯示出來刊侯，就被清除了。

label.addEventListener('touchstart', function () {
      startTime = +new Date()
      timer = setTimeout(function () {
          // 處理長按
      }, 700)
 })
label.addEventListener('touchend', function () {
      endTime = +new Date()
      clearTimeout(timer)
      if (endTime - startTime < 700) {
          // 處理點擊事件
      }
 });

3藕届、兩指放大縮小操作

思路：

計算一開始兩指放在屏幕上時之間的距離x。在兩指滑動時休偶，再計算兩指之間的距離y。x/y=縮放的比例词顾。

實現(xiàn)

默認事件

在移動端手指操作時會默認觸發(fā)一些行為碱妆，比如：滾動，縮放疹尾。上面的例子由于沒有阻止觸摸事件的默認行為導致的。所以當你測試上面例子時睡雇，頁面很容易發(fā)生縮放行為饮醇，影響到測試效果。想阻止觸摸事件的默認行為非常地簡單朴艰，只需要添加如下代碼就可以了：

document.addEventListener("touchstart", function (e) {
    e.preventDefault();
});