用最简单的代码搞定移动web端自定义tap事件

在移动端，代码越简单越好，今天教教分享如何用最简单的代码搞定移动web端自定义tap事件。

移动web端里摸爬滚打这么久踩了不少坑，有一定移动web端经验的同学一定被click困扰过。我也不列外。一路走来被虐的不行，fastclick、touchend、iscroll什么的都用过，各有优劣，都不能一步到位。最后实在是被逼无奈，翻阅了不少资料，自定义了一个tap。插件是基于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");
});

实现原理

基于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的最后面，用法和一般事件一样。