自打諾基亞被蘋果乾趴下，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效果還是很流暢的。繼續研究中。
以上就是本次的分享內容，水平可能有限，如有不妥，直接指出，只是輕點噴，哈哈，謝謝大家。