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

weixin_34258782發表於2016-07-29
行程Web事件

發發牢騷

移動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端的機型測試做的不夠多，後續會慢慢補上。如果在使用中遇到了什麼問題可以留言。

相關文章