移动端tap操作如何实现更流畅的用户体验？

本文共计216个文字，预计阅读时间需要1分钟。

移动端的click有300ms延迟，touchstart太快，touchend能减慢速度，但并不能解决根本问题，zepto的tap事件有点击穿透的bug，因此，只能自己封装一个tap事件来使用：`function tap(node, callback, scope) { ... }`

移动端的click有300ms延迟，touchstart太快，touchend能减慢速度，但并不能解决根本问题，zepto的tap事件有点击穿透的bug，至此，只能自己封装一个tap事件来使用

function tap(node,callback,scope) { node.addEventListener("touchstart", function(e) { x = e.touches[0].pageX; y = e.touches[0].pageY; }); node.addEventListener("touchend", function(e) { e.stopPropagation(); e.preventDefault(); var curx = e.changedTouches[0].pageX; var cury = e.changedTouches[0].pageY; if (Math.abs(curx - x) < 6 && Math.abs(cury - y) < 6) { callback.apply(scope, arguments); } }); } //调用，假设某个button的id为btn var btn = document.getElementById("btn"); tap(btn,function(){ console.log("tap"); }) 下面是zepto的tap事件实现源码：

if (deltaX < 30 && deltaY < 30) { tapTimeout = setTimeout(function() { var event = $.Event('tap') event.cancelTouch = cancelAll touch.el.trigger(event) if (touch.isDoubleTap) { if (touch.el) touch.el.trigger('doubleTap') touch = {} }else { touchTimeout = setTimeout(function() { touchTimeout = null if (touch.el) touch.el.trigger('singleTap') touch = {} }, 250) } }, 0); }