javascript touch事件

近段時間使用html5開發一個公司內部應用，而觸摸事件必然是移動應用中所必須的，剛開始覺得移動設備上或許也會支持鼠標事件，原來是不支持的，好在webkit內核的移動瀏覽器支持touch事件，而且打包成app也毫無壓力。本來覺得touch事件應該跟鼠標事件是同樣的道理，實踐過程當中雖然不難，但仍是碰到了很多坑，才發現仍是略有區別的。

$(document).bind(touchEvents.touchstart, function (event) {
            event.preventDefault();
            
        });
        $(document).bind(touchEvents.touchmove, function (event) {
            event.preventDefault();
            
        });

        $(document).bind(touchEvents.touchend, function (event) {
            event.preventDefault();
            
        });

不少博文中稱touch的三個事件都有targetTouches，touches以及changeTouches對象列表，其實否則，touchend事件中應該是隻有個changeTouches觸摸實例列表的，並且這裏說明一下，回調函數的event只是一個普通的object對象，實際上event中有一個originalEvent屬性，這纔是真正的touch事件，這個事件中才存在着上訴三個觸摸實例列表，這三個實例存儲了觸摸事件的位置等等屬性，相似於鼠標事件。其餘地方基本與鼠標事件是一致的。簡單介紹一下這三個觸摸列表，touches是在屏幕上的全部手指列表，targetTouches是當前DOM上的手指列表，因此當手指移開觸發touchend事件時，event.originalEvent是沒有這個targetTouches列表的，而changeTouches列表是涉及當前事件的列表，例如touchend事件中，手指移開。接下來談談pc與移動端的適配問題，既然使用html5，固然是看中他的跨平臺特性了，不單單要ios和android適配，pc上直接打開網頁最好也是能夠的，可是pc上只支持鼠標事件怎麼辦。好辦，仔細觀察上面代碼的觸摸事件，touchEvents.touchXXX，看以下代碼：

var touchEvents = {
        touchstart: "touchstart",
        touchmove: "touchmove",
        touchend: "touchend",

        /**
         * @desc:判斷是否pc設備，如果pc，須要更改touch事件爲鼠標事件，不然默認觸摸事件
         */
        initTouchEvents: function () {
            if (isPC()) {
                this.touchstart = "mousedown";
                this.touchmove = "mousemove";
                this.touchend = "mouseup";
            }
        }
    };

若在pc上，則使用鼠標事件，在移動設備中，就使用觸摸事件，就這麼簡單，判斷是否pc也很方便，就不作多解釋了。

註釋：event.originalEvent貌似jquery中才有，原生的js直接event.touches、event.targetTouches或者event.changedTouches就行