文章源自:http://blog.youyo.name/archives/zepto-tap-click-through-research.html
zepto tap “点透”研究
在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,下面是一个例子:
先看看zepto RC1版本的tap模拟事件的实现方法:
;(function($){ var touch = {}, touchTimeout function parentIfText(node){ return 'tagName' in node ? node : node.parentNode } function swipeDirection(x1, x2, y1, y2){ var xDelta = Math.abs(x1 - x2), yDelta = Math.abs(y1 - y2) return xDelta >= yDelta ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down') } var longTapDelay = 750, longTapTimeout function longTap(){ longTapTimeout = null if (touch.last) { touch.el.trigger('longTap') touch = {} } } function cancelLongTap(){ if (longTapTimeout) clearTimeout(longTapTimeout) longTapTimeout = null } $(document).ready(function(){ var now, delta $(document.body).bind('touchstart', function(e){ now = Date.now() delta = now - (touch.last || now) touch.el = $(parentIfText(e.touches[0].target)) touchTimeout && clearTimeout(touchTimeout) touch.x1 = e.touches[0].pageX touch.y1 = e.touches[0].pageY if (delta > 0 && delta <= 250) touch.isDoubleTap = true touch.last = now longTapTimeout = setTimeout(longTap, longTapDelay) }).bind('touchmove', function(e){ cancelLongTap() touch.x2 = e.touches[0].pageX touch.y2 = e.touches[0].pageY }).bind('touchend', function(e){ cancelLongTap() // double tap (tapped twice within 250ms) if (touch.isDoubleTap) { touch.el.trigger('doubleTap') touch = {} // swipe } else if ((touch.x2 && Math.abs(touch.x1 - touch.x2) > 30) || (touch.y2 && Math.abs(touch.y1 - touch.y2) > 30)) { 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) { touch.el.trigger('tap') touchTimeout = setTimeout(function(){ touchTimeout = null touch.el.trigger('singleTap') touch = {} }, 250) } }).bind('touchcancel', function(){ if (touchTimeout) clearTimeout(touchTimeout) if (longTapTimeout) clearTimeout(longTapTimeout) longTapTimeout = touchTimeout = null touch = {} }) }) ;['swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'].forEach(function(m){ $.fn[m] = function(callback){ return this.bind(m, callback) } }) })(Zepto)
注意上述代码的31行,zepto的实现过过程是通过兼听绑定在body上的touch事件来完成这些事件的模拟的,也就是说,模拟所用的touch事件在body上才会被捕获。
考虑下面这个页面的代码:
<!doctype html> <head> <meta charset="utf-8"/> <title>zepto tap 点透测试</title> <script src="http://zeptojs.com/zepto.js"></script> <style type="text/css"> #divTapAbove,#divClickUnder{position: absolute;top: 0;left: 0;} #divTapAbove{width: 200px;height: 75px;background: red} #divClickUnder{width: 300px;height: 50px;background: blue} #output{position: absolute;top: 100px;left:0;border: 1px solid #000;width:200px;min-height:100px;} </style> </head> <body> <div id="divClickUnder"></div> <div id="divTapAbove"></div> <div id="output"></div> <script> $(function(){ var $output = $('#output') ,$divTapAbove = $('#divTapAbove') $('#divClickUnder').on('click',function(){ $output.html($output.html() + 'click<br/>') }) $divTapAbove.on('tap',function(){ $divTapAbove.hide() // 注意,该div被tap触发后会隐藏自己 $output.html($output.html() + 'tap<br/>') }) }) </script> </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上,如:
$(function(){ new FastClick(document.body); })
然后给需要“无延迟点击”的元素绑定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,代码如下:
$divTapAbove.on('touchstart',function(e){ // 改变了事件名称,tap是在body上才被触发,而touchend是原生的事件,在dom本身上就会被捕获触发 $divTapAbove.hide() $output.html($output.html() + 'tap<br/>') e.preventDefault(); // 阻止“默认行为” })
可以通过截图看到,这个问题已经解决了。
至此,我们的结论是,在使用zepto框架的tap相关方法时,一定要注意,如果绑定tap方法的dom元素在tap方法触发后会隐藏、 css3 transfer移走、requestAnimationFrame移走等,而“隐藏、移走”后,它底下同一位置正好有一个dom元素绑定了click的 事件、或者有浏览器认为可以被点击有交互反应的dom元素(举例:如input type=text被点击有交互反应是获得焦点并弹起虚拟键盘),则会出现“点透”现象。在这种情况下,我们应当采用上述两种方法来避免“点透”。