移動端

一、定義

觸摸事件類型

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

二、接口

TouchEvent

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

TouchEvent.targetTouches： 一個 TouchList 對象，是包含了如下觸點(diǎn)的 Touch 對象：觸摸起始于當(dāng)前事件的目標(biāo) element 上，并且仍然沒有離開觸摸平面的觸點(diǎn)。

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

TouchList

一個TouchList代表一個觸摸屏幕上所有觸點(diǎn)的列表。
事件對應(yīng)的三個列表包含了當(dāng)前事件的一些相關(guān)信息，比如：一些坐標(biāo)信息。

Touch

?Touch
1、屬性

TouchList

三、示例：

1、拖拽元素

思路：

獲取按下時和選中元素的坐標(biāo)。獲取相對于元素偏移的位置。根據(jù)當(dāng)前的按下的位置減去元素偏移的位置。得到元素拖拽后的位置。在利用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; //按下時和選中元素的坐標(biāo)偏移:x坐標(biāo)
      tTop = e.touches[0].pageY - moveElemRect.top; //按下時和選中元素的坐標(biāo)偏移:y坐標(biāo)
});
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) {
          // 處理點(diǎn)擊事件
      }
 });

3、兩指放大縮小操作

思路：

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

實現(xiàn)

默認(rèn)事件

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

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