zepto的touch模块中，为什么tap事件要通过settimeout触发_百度知道zepto的touch模块解决click延迟300ms问题以及点透问题的详解
zepto的touch模块解决click延迟300ms问题以及点透问题的详解
[摘要：人人皆晓得挪动真个click事情会耽误300ms触收，这时候人人可使用zepto的touch模块，内里界说了一个tap事情，经过绑定tap事情，能够完成面击马上触收的功效。 那末，它的tap事情是怎样真]
大家都知道移动端的click事件会延迟300ms触发，这时大家可以使用zepto的touch模块，里面定义了一个tap事件，通过绑定tap事件，可以实现点击立即触发的功能。
那么，它的tap事件是怎么实现的呢？这是我们要解决的第一个问题。
第二个问题，大家都知道zepto的tap事件会有点透的问题，那么，点透如何出现，点透为什么会出现，点透问题如何解决等，这是我们要解决的第二个问题。
我们先来看tap事件是如何实现的？
查看touch.js代码，在最后的代码中有以下代码：
;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown',
'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(eventName){
$.fn[eventName] = function(callback){ return this.on(eventName, callback) }
上面的代码，是把tap函数，赋给zepto的原型对象。因此，使用tap事件处理函数，有以下两种方法：
1.$("div").tap(function(){})
2.$("div").on("tap",function(){})　　
接下来，我们来查看，touch.js是如何实现tap自定义事件的。
$(document)
.bind('MSGestureEnd', function(e){
var swipeDirectionFromVelocity =
e.velocityX & 1 ? 'Right' : e.velocityX & -1 ? 'Left' : e.velocityY & 1 ? 'Down' : e.velocityY & -1 ? 'Up' :
if (swipeDirectionFromVelocity) {
touch.el.trigger('swipe')
touch.el.trigger('swipe'+ swipeDirectionFromVelocity)
.on('touchstart MSPointerDown pointerdown', function(e){
if((_isPointerType = isPointerEventType(e, 'down')) &&
!isPrimaryTouch(e)) return
firstTouch = _isPointerType ? e : e.touches[0]
if (e.touches && e.touches.length === 1 && touch.x2) {
// Clear out touch movement data if we have it sticking around
// This can occur if touchcancel doesn't fire due to preventDefault, etc.
touch.x2 = undefined
touch.y2 = undefined
now = Date.now()
delta = now - (touch.last || now)
touch.el = $('tagName' in firstTouch.target ?
firstTouch.target : firstTouch.target.parentNode)
touchTimeout && clearTimeout(touchTimeout)
touch.x1 = firstTouch.pageX
touch.y1 = firstTouch.pageY
if (delta & 0 && delta &= 250) touch.isDoubleTap = true
touch.last = now
longTapTimeout = setTimeout(longTap, longTapDelay)
// adds the current touch contact for IE gesture recognition
if (gesture && _isPointerType) gesture.addPointer(e.pointerId);
.on('touchmove MSPointerMove pointermove', function(e){
if((_isPointerType = isPointerEventType(e, 'move')) &&
!isPrimaryTouch(e)) return
firstTouch = _isPointerType ? e : e.touches[0]
cancelLongTap()
touch.x2 = firstTouch.pageX
touch.y2 = firstTouch.pageY
deltaX += Math.abs(touch.x1 - touch.x2)
deltaY += Math.abs(touch.y1 - touch.y2)
.on('touchend MSPointerUp pointerup', function(e){
if((_isPointerType = isPointerEventType(e, 'up')) &&
!isPrimaryTouch(e)) return
cancelLongTap()
if ((touch.x2 && Math.abs(touch.x1 - touch.x2) & 30) ||
(touch.y2 && Math.abs(touch.y1 - touch.y2) & 30))
swipeTimeout = setTimeout(function() {
touch.el.trigger('swipe')
touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))
touch = {}
// normal tap
else if ('last' in touch)
// don't fire tap when delta position changed by more than 30 pixels,
// for instance when moving to a point and back to origin
if (deltaX & 30 && deltaY & 30) {
// delay by one tick so we can cancel the 'tap' event if 'scroll' fires
// ('tap' fires before 'scroll')
tapTimeout = setTimeout(function() {
// trigger universal 'tap' with the option to cancelTouch()
// (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
var event = $.Event('tap')
event.cancelTouch = cancelAll
touch.el.trigger(event)
// trigger double tap immediately
if (touch.isDoubleTap) {
if (touch.el) touch.el.trigger('doubleTap')
touch = {}
// trigger single tap after 250ms of inactivity
touchTimeout = setTimeout(function(){
touchTimeout = null
if (touch.el) touch.el.trigger('singleTap')
touch = {}
touch = {}
deltaX = deltaY = 0
上面的代码，大家都知道，是在document上绑定了很多事件，其中，我们只要关注touchstart和touchend　这两个事件绑定。
在touchend的事件处理函数中，有以下代码：
tapTimeout = setTimeout(function() {
// trigger universal 'tap' with the option to cancelTouch()
// (cancelTouch cancels processing of single vs double taps for faster 'tap' response)
var event = $.Event('tap')
event.cancelTouch = cancelAll
touch.el.trigger(event)
// trigger double tap immediately
if (touch.isDoubleTap) {
if (touch.el) touch.el.trigger('doubleTap')
touch = {}
// trigger single tap after 250ms of inactivity
touchTimeout = setTimeout(function(){
touchTimeout = null
if (touch.el) touch.el.trigger('singleTap')
touch = {}
以上代码就会立即触发一个自定义的tap事件。这时绑定的tap事件回调函数就会立即执行。
因为点击事件，就是touchstart和touchend的组合。
当touchend触发时，就代表一次点击结束，因此在touchend的回调函数中，触发一个自定义的tap事件，相当于触发了tap事件，因此马上就会执行，而不会出现click事件延迟300ms。　　
大家都知道，使用zepto的tap事件，会出现点透的问题。
我们先来了解下，什么叫点透问题？
假如你在列表页面上创建一个弹出层，弹出层有个关闭的按钮（绑定了tap事件），你点了这个按钮关闭弹出层后，这个按钮正下方的内容也会执行点击事件（或打开链接）。这个就是一个&点透&现象。
点透出现的原因是：延迟300ms的click事件触发了。
zepto的touch模块中，没有对这个延迟300ms的click事件取消，或者取消不了。
而fastClick中，会对这个延迟300ms的click事件取消，也就是这个click事件不会触发。
所以zepto的tap事件（通过touchstart和touchend模拟出来的）有点透问题，而fastClick的click事件（通过touchstart和touchend模拟出来的）没有。
zepto中，没有对真实的延迟300ms的click事件做处理，或者做了处理，但是还是触发了。而fastClick对真实的延迟300ms的click事件做了处理，不会触发。
深入到zepto的touch.js和fastClick的源码，我们可以得知：
zepto的tap事件和fastClick的click事件，源码差不多。
为什么基本相同的代码，zepto会点透而fastclick不会呢？
原因是zepto的代码里面有个settimeout，在settimeout里面执行e.preventDefault()不会生效，因此zepto中的延迟300ms的click事件会触发，而fastClick不会。
解决tap点透问题：
1.使用fastclick，不过你之前写的tap事件，都要改成click事件。
2.使用基于zepto的tap插件，此插件，代码量不大，也不用修改你写的tap事件，需要的请问我要，谢谢。
感谢关注 Ithao123精品文库频道，是专门为互联网人打造的学习交流平台，全面满足互联网人工作与学习需求，更多互联网资讯尽在 IThao123!
Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它可以让你从面条一样杂乱的代码中解脱出来；它可以帮你构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。
Hadoop是一个由Apache基金会所开发的分布式系统基础架构。
用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。
Hadoop实现了一个分布式文件系统（Hadoop Distributed File System），简称HDFS。HDFS有高容错性的特点，并且设计用来部署在低廉的（low-cost）硬件上；而且它提供高吞吐量（high throughput）来访问应用程序的数据，适合那些有着超大数据集（large data set）的应用程序。HDFS放宽了（relax）POSIX的要求，可以以流的形式访问（streaming access）文件系统中的数据。
Hadoop的框架最核心的设计就是：HDFS和MapReduce。HDFS为海量的数据提供了存储，则MapReduce为海量的数据提供了计算。
产品设计是互联网产品经理的核心能力，一个好的产品经理一定在产品设计方面有扎实的功底，本专题将从互联网产品设计的几个方面谈谈产品设计
PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点，利于学习，使用广泛，主要适用于Web开发领域。PHP 独特的语法混合了C、Java、Perl以及PHP自创的语法。它可以比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比，PHP是将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行，执行效率比完全生成HTML标记的CGI要高许多；PHP还可以执行编译后代码，编译可以达到加密和优化代码运行，使代码运行更快。
IThao123周刊当前位置：&>&&>&
移动端开发中不使用zepto九大理由
zepto.js真的在移动端开发有那么好吗？1、自己/公司/项目组所写和所积累（网上下的）的js函数都是以jQuery插件的写法来写的，如果要换到zepto上的话那么每个都要改一 点。而且通常都是要同时做PC端和手机端，PC端无疑是要用jQuery，如果手机端用zepto，就会产生两份js插件库，大大增加了维护成本和难度。2、有一部分实用的API被裁剪了，让编程变得困难，本来一句话搞定的事，要自己多写几句才能搞定，一开始还不知道是怎么报的错。3、虽然zepto比jQuery小，但其实文件的大小只在第一次打开该网站时有影响，后面都是使用304本地缓存无需重新下载，文件大小的区别已经没影 响了。就算是第一次下载，移动端不需要IE可以使用jQuery2以上版本，况且现在网站都用GZip压缩，30K左右的大小也能接受吧。4、有一个网站对这几个库进行性能测试，结果是jQuery比zepto的执行效率要高，这就让我怀疑zepto的水平了，明明是裁剪的、为移动优化的但性能却更差。（经过本人亲自测，说明：得出的数值越大说明效率越高性能越好，红色底为效率最低，绿色底为效率最高，我截图只截了最常用的两个写法的效率，苹果和安卓的也测了都是zepto的比jQuery的低，约为60%）Chrome下：Firefox下：5、一个在核心领域核心功能上没有足够优势的库，它作者的水平是否值得信赖，它还会为以后埋下多少坑值得担忧。6、理论上说zepto的tap事件会比click事件少了那300毫秒的延迟，但一般手机端的点击事件基本都要Ajax请求或者跳转页面，相比 网络请求的延迟来说这300毫秒微不足道。而且jQuery也有相应的插件。反正在实际使用中并没有感到那传说中300毫秒的不顺畅。最近了解到说安卓 4.1以上meta标签设置禁止缩放就可以让浏览器禁用300ms的延时了。7、zepto使用touch相关的事件模拟出tap、longTap等事件，目的为解决click事件的300ms 延时，但有个很大的问题是tap事件会“穿透”，“穿透”又会导致一系列问题。业内有个办法是使用一个fastclick的库，用回click事件。8、如果一些插件需要jQuery而并不适应zepto，但项目主要用zepto，那么就很可能会引入了两个库。很多事件没处理好的话就会触发两次，大大增加了填坑复杂度，而不是花精力去关注真正的业务逻辑。9、网上还有zepto各种小BUG的解决小技巧和方案。但是我认为，一个优秀的框架应该是帮助开发人员减少重复工作的，而不是埋下一堆堆莫名其妙的问题，让开发者纠结了又纠结，找了又找，引入一堆本来并不需 要的库/插件，让管理变得更多复杂。另外，多个分散小文件的下载比一个稍大的文件还要耗时（参考CSS Sprite）。有些东西就是昙花一现，开始看起来很惊艳，但实际用起来到处是坑。zepto，也只是昙花一现而已，或许根本就不是一支昙花而是一朵奇葩。
延伸阅读：
网站备案号： &&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！