10行代碼搞定移動web端自定義tap事件

發發牢騷

移動web端裏摸爬滾打這麼久踩了很多坑，有必定移動web端經驗的同窗必定被click困擾過。我也不列外。一路走來被虐的不行，fastclick、touchend、iscroll什麼的都用過，各有優劣，都不能一步到位。最後實在是被逼無奈，翻閱了很多資料，自定義了一個tap。

效果預覽

廢話很少說先上效果 移動端預覽 移動端！移動端！移動端！

一探真假

真的只有10行

插件是基於jQuery的，上代碼。

//自定義tap
$(document).on("touchstart", function(e) {
    if(!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 0);
});
$(document).on("touchmove", function(e) {
    if(!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 1);
});
$(document).on("touchend", function(e) {
    if(!$(e.target).hasClass("disable") && $(e.target).data("isMoved") == 0) $(e.target).trigger("tap");
});

既然說是10行代碼搞定，那麼就必定是10行。

實現原理

基於touchstart、touchmove、touchend這三個事件，經過事件委託的方式來實現tap事件。

e.target是事件源的觸發節點，$(e.target)是該節點的jQuery封裝對象， 默認不處理含有disable class的對象。

第一步：監聽touchstart事件，事件觸發後經過jQuery的data方法設置該對象的isMoved狀態爲0。
第二步：監聽touchmove事件，事件觸發後經過jQuery的data方法設置該對象的isMoved狀態爲1。
第三步：監聽touchend事件，事件觸發後判斷該對象是否touchend過，沒有則觸發tap事件。

使用方法

把上面的10行代碼放在jQuery或者zepto的最後面，用法和通常事件同樣

其餘

目前尚未作PC端的兼容，移動web端的機型測試作的不夠多，後續會慢慢補上。若是在使用中遇到了什麼問題能夠留言。