windows phone和android,ios的touch事件兼容

　　

1.開發背景

 

　　最近用html5寫了個小遊戲，中間踩過無數坑，有不少甚至百度都百度不到答案，可見html5還真是不成熟，兼容性的複雜度比ie6有過之而無不及，性能那個渣簡直無力吐槽。。

　　好了，吐槽結束，雖然有這麼多的缺點，可是因爲其良好的跨平臺前景以及極低的學習成本，再加上優秀的框架，我最終仍是選擇了用html5來開發這個小遊戲，並且是小遊戲，因此就沒有用什麼遊戲開發框架了，只是本身簡單的封裝了一個，所以全部的bug都被我走了一遍。。正當我調試完全部的android上的bug以後，心想本身的努力不能白費啊，跨平臺呢？上wp看看，結果，。。發現竟然沒有結果了。。本身平時用wp手機爲主，android只是開發機（ 淘寶上買的屌絲機).而後又是百度又是bing，最終發現原來ie10種中的觸摸事件和android、ios不同，貌似ie10是MSPointerMove之類，ie11是pointermove(竟然同一系列還沒事更名，這無疑增大了兼容負擔。。)看到此處lz還挺盲目樂觀，至少還有一大批的兼容框架吧。。框架確實有，不過基本上都是集成的重型webapp框架，好比zepto的touch.js， 在wp8手機上配合jquery失敗。我一個小遊戲實在沒有必要啊，不然還不如直接學個遊戲引擎（lz太懶，看到那麼繁複的api又沒有良好的開發工具（webstorm雖然好，畢竟是破解的。。），並且本身也不是專門搞前端的，只是興趣愛好，因此每次想學就又半途而廢了。。）

 

　　最終，終於讓我找到了pointer.js，雖然他的api方式是微軟版本的（採用少數派，有點不爽)，可是能湊合着用也算了，不過在wp8手機上測試失敗，事實上ie10也測試失敗，什麼堆棧溢出，本身改了改源碼，不報錯了，可是觸摸也沒有反應了，因而又放棄了。。

 

　　最後lz鼓起勇氣，決定本身寫一個小的封裝，可是在寫的過程當中又是坑無數。。由於lz新系統沒有裝wp8的sdk(之前裝過2012版的，貌似和校園網客戶端有衝突，因而就只敢裝虛擬機裏了)，因此只能用原始的js alert()調試，結果發現，那些網上的博客，框架，都採用的MSPointer[Down|Up]在滑動手勢中是不會觸發的，只有在點擊纔會觸發。。我了個去啊,這算什麼回事，難道真的得放棄wp版本嗎？放棄了wp平臺，這跨平臺也跨的太坑爹了吧。。並且在滑動事件中MSPointerMove也只會觸發兩次，估計只是第一個點和最後一個點兩次。就在lz萬分懊惱，快要被html5搞得神經錯亂之際(其實在開發過程當中我老是在猶豫要不要用原生的java開發android版本算了，性能絕對能好上一個數量級，如今畫面掉幀嚴重。。），突然靈光一閃，既然down,up不觸發那麼over和out呢？果斷換成MSPointer[over|out],竟然成功了！！而後本身一頓簡單封裝，只支持單點觸控，多點觸控什麼的都沒考慮了，電腦的mouse事件雖有考慮，不過基本無效，之後有時間再完善吧，不過如今暫時夠用了。如今把思路發出來，若是你們有須要的二次開發什麼的也方便。。

 

代碼寫得可能不夠優雅，實在是這個須要兼容的太混亂，加之水平有限，因此還請你們海涵，不喜勿噴。。。

 

2.上源碼

/** * 兼容ie10，11和android、ios的觸摸事件，只須要和android,ios同樣使用函數就能夠了， */ var TouchFix = {}; (function() { var MSPointerType={ start:"MSPointerOver", move:"MSPointerMove", end:"MSPointerOut" }, pointerType={ start:"pointerover", move:"pointermove", end:"pointerout" }, touchType={ start:"touchstart", move:"touchmove", end:"touchend" }, mouseType={ start:"mousedown", move:"mousemove", end:"mouseup", out:"mouseout" }; function isTouch() { return typeof window.ontouchstart !== "undefined"; } function isMSPointer() { return window.navigator.msPointerEnabled; } function isPointer() { return window.navigator.pointerEnabled; } function bindStart(el,cb) { el.addEventListener(pointerType.start, function (e) { pointerHandler(e,cb); }); el.addEventListener(MSPointerType.start, function (e) { MSPointerHandler(e,cb); }); el.addEventListener(touchType.start, function (e) { touchHandler(e,cb); }); if (!isTouch() && !isMSPointer() && !isPointer()) { el.addEventListener(mouseType.start, function (e) { mouseHandler(e,cb); }); } } function bindMove(el,cb) { el.addEventListener(pointerType.move, function (e) { pointerHandler(e,cb); cb(e); }); el.addEventListener(MSPointerType.move, function (e) { MSPointerHandler(e,cb); cb(e); }); el.addEventListener(touchType.move, function (e) { touchHandler(e,cb); }); if (!isTouch() && !isMSPointer() && !isPointer()) { el.addEventListener(mouseType.move, function (e) { mouseHandler(e,cb); }); } } function bindEnd(el,cb) { el.addEventListener(pointerType.end, function (e) { pointerHandler(e,cb); }); el.addEventListener(MSPointerType.end, function (e) { MSPointerHandler(e,cb); }); el.addEventListener(touchType.end, function (e) { touchHandler(e,cb); }); if (!isTouch() && !isMSPointer() && !isPointer()) { el.addEventListener(mouseType.end, function (e) { mouseHandler(e,cb); }); el.addEventListener(mouseType.out, function (e) { mouseHandler(e,cb); }); } } TouchFix.bind = function(el,type,cb) { switch (type) { case touchType.start: bindStart(el,cb); break; case touchType.move: bindMove(el,cb); break; case touchType.end: bindEnd(el,cb); break; default: break; } } var hasTouchStart=false; function commonHandler (e) { if(e.type===MSPointerType.start ||e.type===pointerType.start ||e.type===mouseType.start){ e.type=touchType.start; }else if(e.type===MSPointerType.move ||e.type===pointerType.move ||e.type===mouseType.move){ e.type=touchType.move; }else if(e.type===MSPointerType.end ||e.type===pointerType.end ||e.type===mouseType.end ||e.type===mouseType.out){ e.type=touchType.end; } e.touches=[]; e.pageX=e.clientX; e.pageY=e.clientX; e.touches[0]=e; } function MSPointerHandler(e,cb) { commonHandler(e); cb(e); } function pointerHandler (e,cb) { commonHandler(e); cb(e); } function touchHandler (e,cb) { cb(e); } function mouseHandler (e,cb) { commonHandler(e); cb(e); } })();

touchfix.js

 

 

 1 TouchFix.bind(element,"touchstart",function(e){
 2     var t=e.touches[0];
 3     var x=t.pageX;
 4     var y=t.pageY;
 5 });
 6 TouchFix.bind(element,"touchmove",function(e){
 7     var t=e.touches[0];
 8     var x=t.pageX;
 9     var y=t.pageY;
10 });
11 TouchFix.bind(element,"touchend",function(e){
12 //在安卓中貌似在這裏獲取不到e，只能用move中的最後一個點代替
13     if(!e||!e.touches||e.touches.length===0){
14         return ;
15     }
16     var t=e.touches[0];
17     var x=t.pageX;
18     var y=t.pageY;
19 });