Introduction

最近剛入坑web前端，學了一點基礎，便準備寫個簡單的2048小遊戲試試手。開發過程中發現，
PC端可以直接監聽鍵盤輸入，但是移動端就不得不監聽螢幕上的滑動事件了。

• 現有的js庫中沒有可以直接滿足上述要求的封裝
• 在JQuery Mobile 中 可以通過 .on 的方式監聽左右滑動事件，但是沒有上下滑動事件（而且我想寫一個PC端和移動端都通用的網頁的話，就必須引入Jquery，同時引入Jquery和Jquery Mobile 使得Bootstrap中的按鈕樣式改變了，這顯然不是想要的結果）
• 所以為了保持PC端和移動端的一致性，決定直接封裝一下js的移動端的觸控事件，實現上述需求

2048

可以在手機上開啟，仍然具有不錯的互動

• 點我體驗
• 原始碼地址
• 

JS 觸控事件（event）

• ### event的型別
  
  • touchstart: 當手指觸控式螢幕幕時觸發（相當於Android中的ACTION_DOWN事件）
  • touchmove: 當手指在螢幕上滑動時連續觸發（相當於Android中的ACTION_MOVE事件）— 期間呼叫preventDefault()可以遮蔽事件的預設行為，達到阻止滾動的效果
  • touchend: 當手指從螢幕上移開時觸發（相當與Android中的ACTION_UP）
  • touchcancel: 當系統停止跟蹤觸控時觸發。關於此事件的觸發時機，文件中沒有明確說明（我們在接下來的過程中也用不到）

• event用於跟蹤觸控的屬性

  • touches: 表示當前跟蹤的觸控操作的Touch物件的陣列
  • targetTouches: 特定於事件目標的Touch物件陣列
  • changeTouches: 表示子上次觸控以來發生了什麼改變的Touch物件的陣列
    

  注意： 在touchend事件發生時，event的touches物件中就沒有元素了，需要到changeTouches中去獲取觸控離開時的位置資訊

封裝一個操作物件

該物件的封裝，前兩個函式參考書籍《JavaScript 高階程式設計》（第三版）

var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener)
            element.addEventListener(type, handler, false);
        else if (element.attachEvent)
            element.attachEvent("on" + type, handler);
        else
            element["on" + type] = handler;
    },
    removeHandler: function (element, type, handler) {
        if(element.removeEventListener)
            element.removeEventListener(type, handler, false);
        else if(element.detachEvent)
            element.detachEvent("on" + type, handler);
        else
            element["on" + type] = handler;
    },
    /**
     * 監聽觸控的方向
     * @param target            要繫結監聽的目標元素
     * @param isPreventDefault  是否遮蔽掉觸控滑動的預設行為（例如頁面的上下滾動，縮放等）
     * @param upCallback        向上滑動的監聽回撥（若不關心，可以不傳，或傳false）
     * @param rightCallback     向右滑動的監聽回撥（若不關心，可以不傳，或傳false）
     * @param downCallback      向下滑動的監聽回撥（若不關心，可以不傳，或傳false）
     * @param leftCallback      向左滑動的監聽回撥（若不關心，可以不傳，或傳false）
     */
    listenTouchDirection: function (target, isPreventDefault, upCallback, rightCallback, downCallback, leftCallback) {
        this.addHandler(target, "touchstart", handleTouchEvent);
        this.addHandler(target, "touchend", handleTouchEvent);
        this.addHandler(target, "touchmove", handleTouchEvent);
        var startX;
        var startY;
        function handleTouchEvent(event) {
            switch (event.type){
                case "touchstart":
                    startX = event.touches[0].pageX;
                    startY = event.touches[0].pageY;
                    break;
                case "touchend":
                    var spanX = event.changedTouches[0].pageX - startX;
                    var spanY = event.changedTouches[0].pageY - startY;

                    if(Math.abs(spanX) > Math.abs(spanY)){      //認定為水平方向滑動
                        if(spanX > 30){         //向右
                            if(rightCallback)
                                rightCallback();
                        } else if(spanX < -30){ //向左
                            if(leftCallback)
                                leftCallback();
                        }
                    } else {                                    //認定為垂直方向滑動
                        if(spanY > 30){         //向下
                            if(downCallback)
                                downCallback();
                        } else if (spanY < -30) {//向上
                            if(upCallback)
                                upCallback();
                        }
                    }

                    break;
                case "touchmove":
                    //阻止預設行為
                    if(isPreventDefault)
                        event.preventDefault();
                    break;
            }
        }
    }
};

• 使用

  //使用的時候很簡單，只需要向下面這樣呼叫即可
  //其中下面監聽的是整個DOM
  //up, right, down, left為四個回撥函式，分別處理上下左右的滑動事件
  EventUtil.listenTouchDirection(document, true, up， right, down, left)