`

zepto点透研究【转】

zepto tap 点透 
阅读更多

文章源自:http://blog.youyo.name/archives/zepto-tap-click-through-research.html

 

zepto tap “点透”研究

在使用zepto框架的tap来移动设备浏览器内的点击事件，来规避click事件的延迟响应时，有可能出现点透的情况，下面是一个例子：
先看看zepto RC1版本的tap模拟事件的实现方法：

Js代码  收藏代码
  1. ;(function($){  
  2.   var touch = {}, touchTimeout  
  3.    
  4.   function parentIfText(node){  
  5.     return 'tagName' in node ? node : node.parentNode  
  6.   }  
  7.    
  8.   function swipeDirection(x1, x2, y1, y2){  
  9.     var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2)  
  10.     return xDelta >= yDelta ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')  
  11.   }  
  12.    
  13.   var longTapDelay = 750, longTapTimeout  
  14.    
  15.   function longTap(){  
  16.     longTapTimeout = null  
  17.     if (touch.last) {  
  18.       touch.el.trigger('longTap')  
  19.       touch = {}  
  20.     }  
  21.   }  
  22.    
  23.   function cancelLongTap(){  
  24.     if (longTapTimeout) clearTimeout(longTapTimeout)  
  25.     longTapTimeout = null  
  26.   }  
  27.    
  28.   $(document).ready(function(){  
  29.     var now, delta  
  30.    
  31.     $(document.body).bind('touchstart', function(e){  
  32.       now = Date.now()  
  33.       delta = now - (touch.last || now)  
  34.       touch.el = $(parentIfText(e.touches[0].target))  
  35.       touchTimeout && clearTimeout(touchTimeout)  
  36.       touch.x1 = e.touches[0].pageX  
  37.       touch.y1 = e.touches[0].pageY  
  38.       if (delta > 0 && delta <= 250) touch.isDoubleTap = true  
  39.       touch.last = now  
  40.       longTapTimeout = setTimeout(longTap, longTapDelay)  
  41.     }).bind('touchmove', function(e){  
  42.       cancelLongTap()  
  43.       touch.x2 = e.touches[0].pageX  
  44.       touch.y2 = e.touches[0].pageY  
  45.     }).bind('touchend', function(e){  
  46.        cancelLongTap()  
  47.    
  48.       // double tap (tapped twice within 250ms)  
  49.       if (touch.isDoubleTap) {  
  50.         touch.el.trigger('doubleTap')  
  51.         touch = {}  
  52.    
  53.       // swipe  
  54.       } else if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) ||  
  55.                  (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30)) {  
  56.         touch.el.trigger('swipe') &&  
  57.           touch.el.trigger('swipe' + (swipeDirection(touch.x1, touch.x2, touch.y1, touch.y2)))  
  58.         touch = {}  
  59.    
  60.       // normal tap  
  61.       } else if ('last' in touch) {  
  62.         touch.el.trigger('tap')  
  63.    
  64.         touchTimeout = setTimeout(function(){  
  65.           touchTimeout = null  
  66.           touch.el.trigger('singleTap')  
  67.           touch = {}  
  68.         }, 250)  
  69.       }  
  70.     }).bind('touchcancel', function(){  
  71.       if (touchTimeout) clearTimeout(touchTimeout)  
  72.       if (longTapTimeout) clearTimeout(longTapTimeout)  
  73.       longTapTimeout = touchTimeout = null  
  74.       touch = {}  
  75.     })  
  76.   })  
  77.    
  78.   ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(m){  
  79.     $.fn[m] = function(callback){ return this.bind(m, callback) }  
  80.   })  
  81. })(Zepto)  

 注意上述代码的31行，zepto的实现过过程是通过兼听绑定在body上的touch事件来完成这些事件的模拟的，也就是说，模拟所用的touch事件在body上才会被捕获。
考虑下面这个页面的代码：

Js代码  收藏代码
  1. <!doctype html>  
  2. <head>  
  3.     <meta charset="utf-8"/>  
  4.     <title>zepto tap 点透测试</title>  
  5.     <script src="http://zeptojs.com/zepto.js"></script>  
  6.     <style type="text/css">  
  7.         #divTapAbove,#divClickUnder{position: absolute;top: 0;left: 0;}  
  8.         #divTapAbove{width: 200px;height: 75px;background: red}  
  9.         #divClickUnder{width: 300px;height: 50px;background: blue}  
  10.         #output{position: absolute;top: 100px;left:0;border: 1px solid #000;width:200px;min-height:100px;}  
  11.     </style>  
  12. </head>  
  13. <body>  
  14.     <div id="divClickUnder"></div>  
  15.     <div id="divTapAbove"></div>  
  16.     <div id="output"></div>  
  17.     <script>  
  18.         $(function(){  
  19.             var $output = $('#output')  
  20.             ,$divTapAbove = $('#divTapAbove')  
  21.             $('#divClickUnder').on('click',function(){  
  22.                 $output.html($output.html() + 'click<br/>')  
  23.             })  
  24.             $divTapAbove.on('tap',function(){  
  25.                 $divTapAbove.hide() // 注意，该div被tap触发后会隐藏自己  
  26.                 $output.html($output.html() + 'tap<br/>')  
  27.             })  
  28.         })  
  29.     </script>  
  30. </body>  

 在桌面的chorme浏览器上，并且打卡开发人员工具提供的“Emulate touch events”对touch事件进行模拟，点击两个div的公共区域，只会触发divTapAbove的tap事件，情况换到ios上的safari就不一样了，点击前如图：

   点击后的情况如下：


 可以发现，在ios的safari上，tap隐藏了上面的“divTapAbove”后，同时也触发了下面的“divClickUnder”的click事件，即俗称的“点透了”。
原因是因为：
1.根据上面贴的zepto代码的31行，tap事件实际上是在冒泡到body上时才触发
2.ios safari上有click事件的延迟触发
具体分析，body是包含“divClickUnder”的（即在DOM树上，body是divClickUnder前辈）在它冒泡到body之前，用户 手的接触屏幕和离开屏幕是会先触发click事件的，（根据click事件的规则，只有在被触发时，当前有click事件的元素显示，且在面朝用户的最前 端时，才触发click事件）由于click延迟，此时上面的“divTapAbove”已经隐藏，满足下面的“divClickUnder”的 click事件的触发条件，于是click事件就被触发了，即“点透”了。

 

解决方案一：
github上有一个叫做fastclick的库，它也能规避移动设备上click事件的延迟响应，https://github.com/ftlabs/fastclick
将它用script标签引入页面（该库支持AMD，于是你也可以按照AMD规范，用诸如require.js的模块加载器引入），并且在dom ready时初始化在body上，如：

Js代码  收藏代码
  1. $(function(){  
  2.     new FastClick(document.body);  
  3. })  

 然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。
当然，你也可以不在body上初始化它，而在某个dom上初始化，这样，只有这个dom和它的子元素才能享受“无延迟”的点击
进一步，对于zepto，如果你打算继续使用它，那么它的tap相关事件已经没有用了，我们可以自己build一个无“touch”模块的zepto，以便减小zepto文件的大小和提高运行效率。zepto的github页面有定制化模块的方法，见https://github.com/madrobby/zepto的building部分。
经过亲测，这样不会发生“点透”现象.

 

解决方案二：
根据分析，如果不引入其它类库，也不想自己按照上述fastclcik的思路再开发一套东西，需要
1.一个优先于下面的“divClickUnder”捕获的事件
2.并且通过这个事件阻止掉默认行为（下面的“divClickUnder”对click事件的捕获，在ios的safari，click的捕获被认为和 滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即可以被event.preventDefault()阻止的行为）。
如，将tap事件改为touchstart（虽然意思肯定不完全一样，而且不够优雅），这样就直接在“divTapAbove”被捕获，而不是在body上才被捕获了，满足了1；再在内部使用preventDefault()解决了2，代码如下：

Js代码  收藏代码
  1. $divTapAbove.on('touchstart',function(e){ // 改变了事件名称，tap是在body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发  
  2.     $divTapAbove.hide()  
  3.     $output.html($output.html() + 'tap<br/>')  
  4.     e.preventDefault(); // 阻止“默认行为”  
  5. })  

 可以通过截图看到，这个问题已经解决了。

 

至此，我们的结论是，在使用zepto框架的tap相关方法时，一定要注意，如果绑定tap方法的dom元素在tap方法触发后会隐藏、 css3 transfer移走、requestAnimationFrame移走等，而“隐藏、移走”后，它底下同一位置正好有一个dom元素绑定了click的 事件、或者有浏览器认为可以被点击有交互反应的dom元素（举例：如input type=text被点击有交互反应是获得焦点并弹起虚拟键盘），则会出现“点透”现象。在这种情况下，我们应当采用上述两种方法来避免“点透”。

分享到：
| CSS中z-index的层级树概念
评论
1 楼 zxbzyb 2014-06-05  
这么漂酿的妹纸,做技术浪费了
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery validation 支持zepto

    让jquery validation plugin 支持zepto

    zepto.js的中文手册，中文api说明，zepto中文注释

    ### Zepto.js中文手册知识点详解 #### 一、概述 Zepto.js是一个轻量级的JavaScript库，旨在为移动Web开发提供与jQuery类似的API。它体积小、性能高且易于使用，非常适合移动设备上的Web应用开发。Zepto.js支持大...

    mobiscroll.zepto.zip

    《 Mobiscroll 与 Zepto 的日期选择器集成详解》 在移动开发中，提供一个易用、高效的日期选择器是至关重要的。Mobiscroll 是一款知名的触摸优化的滚动库，特别适合在移动设备上创建日历、时钟和滑动选择器。而 ...

    zepto库中touch.js

    Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。 如果你会用jquery，那么你也会用zepto。touch库实现'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap',...

    基于zepto实现的适合移动网页的大转盘抽奖效果.zip

    总结来说，基于Zepto.js实现的移动网页大转盘抽奖效果，融合了JavaScript动画、随机数生成、用户交互等多个技术点，既展示了Zepto.js在移动端的强大功能，也为网页设计师提供了实现互动效果的新途径。通过这个项目，...

    Zepto集成touch版本

    标题提到的"Zepto集成touch版本"指的是 Zepto 的一个扩展，专门针对触摸事件和手势处理进行了优化，使其更适合在触屏设备如智能手机和平板电脑上使用。这个集成版本包含了更多的功能，比官方提供的基础7个组件更加...

    zepto包含touch模块

    zepto.js是一个轻量级的JavaScript库，专为移动设备的Web开发设计，尤其是针对触摸屏设备。它提供了类似于jQuery的API，使开发者能够轻松地处理DOM操作、事件处理、动画效果以及Ajax交互。在标题提到的"zepto包含...

    zepto手机移动端弹出提示框图标动画特效

    在“zepto手机移动端弹出提示框图标动画特效”中，我们可能会看到以下关键知识点： 1. **动画效果**：Zepto库支持CSS3动画，可以轻松实现复杂的动画效果。这种提示框的动画可能包括淡入淡出、滑动、旋转等，这些...

    zepto：node了一个

    标题“zepto：node了一个”暗示我们即将探讨的是一个与Node.js环境相关的项目，其中使用了Zepto库。Zepto是一个轻量级的JavaScript库，它为浏览器环境提供了类似于jQuery的功能，但体积更小，更适合移动端的Web应用...

    zepto.js中文离线手册网页版

    zepto.js是一款轻量级的JavaScript库，专为移动设备的浏览器设计，特别是针对iOS和Android等触屏设备。它提供了与jQuery相似的功能，但体积更小，加载速度更快，适合移动环境。Zepto.js的核心目标是实现一个适用于...

    javascript框架- zepto.js

    zepto.js是一款专门为移动Web开发设计的轻量级JavaScript库，它的目标是成为jQuery在移动端的替代品。鉴于jQuery在桌面浏览器上的强大功能，zepto.js在保持相似API的同时，专注于移动设备的需求，以较小的体积提供...

    移动端zepto工具包

    Zepto是一个轻量级的JavaScript库，专门为移动设备设计，特别是在iOS和Android平台上。它旨在为移动Web开发提供类似于jQuery的API，使开发者能够轻松地处理DOM操作、事件处理、动画效果以及Ajax交互。在移动端，...

    zepto下的page切换控件

    通过理解和应用以上知识点，你可以利用zepto-page-transitions创建出具有动态页面切换效果的移动Web应用，同时保持代码的简洁性和性能的高效性。在实际开发中，结合良好的编程实践和对移动端特性的理解，可以使你的...

    zepto.min.js

    Zepto是用于现代浏览器的极简JavaScript库，具有与 jQuery兼容的API。 移动端常用js

    zepto离线手册

    zepto.js是一个轻量级的JavaScript库，专为移动设备的Web开发设计，尤其是在iOS和Android平台上。它模仿了jQuery的API，使得开发者在移动端也能享受类似jQuery的开发体验。Zepto的核心目标是保持小巧的体积，同时...

    zepto-cookie-master

    在IT行业中，JavaScript库Zepto是为移动端浏览器设计的一个轻量级替代库，与jQuery有很高的API兼容性。本文将深入探讨"zepto-cookie-master"这个项目，它是一个专门用于处理Cookie操作的Zepto插件。 Cookie是Web...

    DIY-zepto:一步一步DIY zepto库，研究zepto源码博客系列代码-源码客

    1.关于文件和文件夹的说明 sourceSrc是官方源码文件夹 src是自己写DIY的源码 ...下面这个系列是官方源码编译的，可以方便测试代码 ... v0.1文件夹对应对应一步一步DIY zepto库，研究zepto源码1.md _ze

    移动框架zepto.js

    3. **社区支持**：Zepto.js有活跃的社区和丰富的插件库，可以扩展其功能，如zepto.form插件用于处理表单提交，zepto.swipe用于滑动事件等。 4. **调试与优化**：在开发过程中，使用开发者工具检查性能瓶颈，适时...

    好用的zepto.js

    zepto.js 这个可以用tap事件

    zepto 中文api文档 【离线文件】

    zepto.js 是一个轻量级的JavaScript库，主要针对移动设备和现代浏览器，它提供了类似于jQuery的核心功能，包括选择器、DOM操作、事件处理、动画效果以及Ajax等。这个压缩包包含了一份Zepto中文API的离线文档，方便...

Magicbox
Global site tag (gtag.js) - Google Analytics