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

TouchFix.bind(element,"touchstart",function(e){
var t=e.touches[0];
var x=t.pageX;
var y=t.pageY;
});
TouchFix.bind(element,"touchmove",function(e){
var t=e.touches[0];
var x=t.pageX;
var y=t.pageY;
});
TouchFix.bind(element,"touchend",function(e){
//在安卓中貌似在这里获取不到e，只能用move中的最后一个点代替
if(!e||!e.touches||e.touches.length===0){
return ;
}
var t=e.touches[0];
var x=t.pageX;
var y=t.pageY;
});