移動端：移動端事件

移動端事件

---

一、  PC端事件

1. 鼠標類
• click、mouseover、mouseout、mouseleave、mouseenter、mouseup、mousedown、mousewheel...
2. 鍵盤類
• keydown、keyup...
3. 其他類
• load、blur、focus、change....

二、 移動端事件

1. 點擊事件
2. 雙擊事件
3. 滑動事件
• 上滑、下滑、左滑、右滑
4. 長按事件
5. 搖一搖、重力感應等

三、 touch事件模型

1. touchstart          手指剛接觸屏幕時觸發
2. touchmove        手指在屏幕上移動時觸發
3. touchend           手指從屏幕上移開時觸發
4. touchcancel       一些更高級別的事件發生時（如電話接入或者彈出信息）會取消當前的touch操作，即觸發touchcancel。一般會在touchcancel時暫停游戲、存檔等操作

 *  在Chrome移動模擬器中模擬，發現鼠標觸摸span元素沒有任何效果  解決方法：addEventListener

四、addEventListener

1. 是一個偵聽事件並處理相應的函數
2. 一般有三個參數，第一個是事件的類型，第二個是偵聽到事件后處理事件的函數，第三個參數是事件捕獲（值就只有兩個，true或false）

五、跟蹤觸摸的屬性

1. touches：表示當前跟蹤的觸摸操作的touch對象的數組
• 當一個手指在觸屏上時，event.touches.length=1
• 當兩個手指在觸屏上時，event.touches.length=2，以此類推
2. changedTouches：導致觸摸事件被觸發的觸摸點數組
3. targetTouches：特定於事件目標的touch對象數組

六、 觸摸事件坐標

1. clientX         觸摸目標在視口中的x坐標
2. clientY         觸摸目標在視口中的y坐標
3. identifier     標識觸摸的唯一ID
4. pageX         觸摸目標在頁面中的x坐標
5. pageY         觸摸目標在頁面中的y坐標
6. screenX       觸摸目標在屏幕中的x坐標
7. screenY       觸摸目標在屏幕中的y坐標
8. target          觸摸的DOM節點目標

   /* 觸摸事件坐標的使用方法 */
   function handleTouch(e){
   //  如果需要，用pageX或pageY代替clientX或clientY
     var touch = e.changedTouches[0];
     var coorX = touch.clientX;
     var coorY = touch.clientY;
   }
   * clientX/Y和pageX/Y的區別在於前者相對於視覺視口的左上角，后者相對布局視口的左上角。布局視口 是可以滾動的

七、 移動端事件封裝

/* 單擊事件 */
element.addEventListener('touchstart', function(e) {
            var touches = e.touches[0];
            startTx = touches.clientX;
            startTy = touches.clientY;
        }, false);
* 案例中通過調用tap（封裝的單擊事件），可以很大程度上簡化代碼量，方便我們開發
/* 長按事件 */
var touches = e.touches[0];
            // 長按 750ms 才去執行 fn函數
            lTapTimer = setTimeout(function() {  fn();  }, 750);
            e.preventDefault();
* 在touchmove中需要判斷水平或者垂直方向的坐標距離，如果大於某個值，我們就不再認為是長按操作了

八、FastClick庫

1. 定義
• 一個簡單易用的庫，用於消除click移動瀏覽器上物理點擊和事件觸發之間的300毫秒延遲
2. 網址
• https://github.com/ftlabs/fastclick
• 截至2015年底，大多數移動瀏覽器（特別是Chrome和Safari）不再具有300ms的觸摸延遲，因此fastclick對新型瀏覽器沒有任何好處，並且可能會在應用程序中引入錯誤。仔細考慮你是否真的需要使用它
3. 使用方法
• 引入插件的javascript文件到你的HTML網頁中
• <script type='application/javascript' src='/path/to/fastclick.js'></script>
• 注意：
• type屬性在HTML5網頁中可以省略不寫
• 腳本必須加載到實例化fastclick在頁面的任何元素之前
• 實例化 fastclick 最好在body元素的前面

  /*  實例化 */
  if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
          FastClick.attach(document.body);
      }, false);
  }
  * 引入庫和實例化推薦寫到body元素的前面

九、 移動端事件庫

1. touch.js
• 百度touch.js 是Web移動端touch點擊事件不錯的解決方案
2. 網站
• https://github.com/Clouda-team/touchjs
3. 支持移動端事件
4. 
5. hammer.js
   • 一款開源的移動端腳本框架，他能完美的實現在移端開發的大多數事件，如點擊、滑動、拖動、多點觸控等事件
   • 網站   http://hammerjs.github.io/getting-started/
   • 需要new