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=event.this = (this);this.parents(‘.t-row’).attr(“touchstart”,0);
if(startX - endX < 60){
return;
}
cb(event);
});
break;
case touchEvent.swiperight:
(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(endX - startX < 30){  
                    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;
event.this=(this);
if(endX - startX < 30){
return;
}
cb(event);
});
break;
}
}
……

其中，touchEvent对象如下：
var touchEvent = {
touchstart:”touchstart”,
touchmove:”touchmove”,
touchend:”touchend”,
click:”click”,//touchstart -> touchend
swipeleft:”swipeleft”,
swiperight:”swiperight”,
/**
* 判断是否触摸设备，若非触摸设备，touch事件替换为鼠标事件
*/
init:function(){
if (isPC()) {
this.touchstart = “mousedown”;
this.touchmove = “mousemove”;
this.touchend = “mouseup”;
}
return this;
}
}

首先检测设备，若是pc端，直接使用鼠标事件，若是移动设备，则使用touch事件，这里实现了点击事件，左滑和右滑。这里采用了(document).on()的方式监听，有利于未加载元素的预处理，有利于单页面开发模式。不理解的可以了解事件监听中on和bind的区别，不在这里赘述了。以click点击为例，假设有个div对象div，监听click事件，代码实现如下：
$div.touch('click',function(event){})
第三个参数为是否取消冒泡，默认为false。对于touch事件的事件处理以及事件对象，这里不重新解释，不明白可以查看我之前的博文，touchstart,touchmove,touchend触摸事件的小小实践心得。
使用中还有几个问题：左右滑动的时候，似乎没有触发touchend事件，且安卓不是十分友好，iPhone效果还是很流畅的。继续研究中。
以上就是本次的分享内容，水平可能有限，如有不妥，直接指出，只是轻点喷，哈哈，谢谢大家。