html5移动设备浏览器触屏事件兼容处理

自打诺基亚被苹果干趴下，Google开源Android系统，智能设备数量以及种类以不可阻挡的势头发展，苹果封闭的生态系统，Android开源开放的生态导致，殊途同归地给了我等屌丝开发者相同苦逼的命运，兼容命题。跨平台适配是个痛苦的工作，这里只谈谈近期工作学习相关的部分，苹果设备和安卓设备浏览器对触屏事件的兼容问题。

点我

$(‘#click-me’).on(‘click’,function(){
alert(‘click’);
})
这段代码在pc上浏览器畅通无阻，手机端，拿起华为手机，perfect，换上iPhone56plus，萎了，什么反应都木有，什么情况？是的，伟大的触摸事件兼容性命题被抛出来了。虽然没向苹果公司验证，经过大量测试，应该无误。苹果设备只支持input标签的原生click事件，其他的标签，click无效。那怎么办，当然能办，还有专业的触屏事件，touchstart，touchmove,touchend事件。不多说，上主要代码，

......
$.fn.touch = function(type,selector,cb,cancelBubble){
if(arguments.length == 2){
    cb = selector;
}else if(arguments.length == 3){
    cancelBubble = cb;
    cb = selector;
}
selector = $(this).selector;
    $(document).on(touchEvent.touchstart,selector,function(event){
        if(cancelBubble){
            event.stopPropagation();
            event.originalEvent.stopPropagation();
        }
        if(event.originalEvent && event.originalEvent.targetTouches){
            event = event.originalEvent.targetTouches[0];
        }
        startX = event.clientX;
        touchStartTime = new Date().getTime();
        var _$this = $(this);
        _$this.parents('.t-row').attr("touchstart",1);
        event.$this = _$this;
    });
switch (type){
    case touchEvent.click:

// $(this).each(function(){$(document).on(touchEvent.touchend,selector,function(event){
touchEndTime = new Date().getTime();
var _$this =$(this);
var longTouchtimeout = ”;
if(cancelBubble){
event.stopPropagation();
event.originalEvent.stopPropagation();
}
if(event.originalEvent && event.originalEvent.changedTouches){
event = event.originalEvent.changedTouches[0];
}
endX = event.clientX;
if((touchEndTime - touchStartTime) < 500 && Math.abs(startX - endX) < 10){
event.$this = _$this;
cb(event);
}
});
break;
case touchEvent.swipeleft:
$(document).on(touchEvent.touchmove,selector,function(event){ if(cancelBubble){ event.stopPropagation(); event.originalEvent.stopPropagation(); } if(event.originalEvent && event.originalEvent.targetTouches){ event = event.originalEvent.targetTouches[0]; } var $this = $(this); if($this.attr(“touchstart”) != 1){ return; } endX = event.clientX; event.$this = $(this); if(startX - endX < 60){ return; } $this.attr(“touchstart”,0); cb(event); });$(document).on(touchEvent.touchend,selector,function(event){
if(cancelBubble){
event.stopPropagation();
event.originalEvent.stopPropagation();
}
if(event.originalEvent && event.originalEvent.changedTouches){
event = event.originalEvent.changedTouches[0];
}
endX = event.clientX;
var this=ev