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 });
windows phone和android,ios的touch事件兼容