文章源自: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被点击有交互反应是获得焦点并弹起虚拟键盘），则会出现“点透”现象。在这种情况下，我们应当采用上述两种方法来避免“点透”。
相关推荐
在移动开发中，click事件常常有延迟，为了提高用户交互的响应速度，zepto.js提供了tap事件。tap事件类似于click事件，但是它的响应更快，因为它在浏览器级别上做了优化以减少延迟。 然而，在使用tap事件的时候，会...
touch库实现'swipe', 'swipeLeft', 'swipeRight', 'swipeUp', 'swipeDown', 'doubleTap', 'tap', 'singleTap', 'longTap'重要源代码（绑定在touchend事件上） 处理Touch事件能让你了解到用户的每一根手指的位置，...
触摸模块是zepto.js的一个重要组成部分，它允许开发者处理触摸设备上的各种手势，如触摸开始(tap)、移动(swipe)、滑动(start, move, end)等。这对于构建响应式和触控友好的移动Web应用至关重要。例如，`$.fn.tap`...
zepto.js 这个可以用tap事件
9. **touch模块**: 专为触摸设备设计，提供了触摸事件的支持，如tap、swipe等，使得Zepto在移动设备上具有更好的兼容性和响应性。 这些模块共同构建了Zepto的功能集，使其能够满足现代Web开发中的各种需求。在Node....
它提供了`tap`事件，用于监听轻触（点击）行为，而`swipe`事件则用于检测滑动动作，这些都是移动设备常见的交互方式。这些触摸事件使得开发者可以轻松实现移动设备特有的手势交互。 4. **动画效果**：尽管体积小，...
以上四种方法涵盖了使用库（Hammer.js和Zepto.js）以及原生JavaScript和CSS实现`tap`事件的方式。每种方法都有其适用场景，具体选择应根据项目需求和技术栈来决定。例如，如果项目已经依赖了Hammer.js或Zepto.js，...
3. **触摸事件**：移动端的交互方式主要依赖触摸，因此组件库应提供良好的触摸事件支持，如tap、swipe等，以确保用户操作的顺畅性。 4. **兼容性测试**：尽管Zepto对大部分现代浏览器支持良好，但还是需要进行兼容...
开发者可以深入研究源代码，了解其内部工作原理，或者根据需要定制和扩展Zepto的功能。 在实际开发中，Zepto通过模块化设计，允许开发者按需加载所需的组件，以降低最终文件大小。例如，如果项目不需要触摸事件支持...
然而，`tap`事件会引发另一个问题，即“点透”（tap穿透）现象，即用户点击覆盖在底层元素上的透明蒙版时，底层元素的`click`事件仍然会被触发。 FastClick是一个轻量级的JavaScript库，它的主要目标是消除300ms...
Zepto的核心关注点在于提供一套简洁、高效的DOM操作API，以及与jQuery兼容的事件处理和动画功能。在移动端，由于资源有限，使用像Zepto这样小体积的库能有效减少页面加载时间，提高性能。在本项目中，`zepto.js`可能...
**移动端事件处理**：除了Zepto自身的手势事件，还可以结合其他库如jQuery Mobile的`tap`, `taphold`, `swipe`, `swipeleft`, `swiperight`，以及Hammer.js来处理更多复杂的触摸和手势事件。 在实际使用中，例如，...
在这个事件的处理函数中，使用Zepto的`on`方法来添加"tap"事件监听器。当按钮被点击时，会触发一个函数，该函数获取按钮的父元素中找到密码输入框，并检查其`type`属性。如果属性值为"password"，则将其修改为"text...
1. **Zepto.js的使用**：理解Zepto的基本API，如`$(selector)`选择器、`.on()`事件绑定、`.click()`或`.tap()`处理点击事件、`.show()`和`.hide()`显示与隐藏元素、`.animate()`执行动画等。 2. **响应式布局**：...
6. **特殊事件支持**：可能增加了对一些非标准但实用的事件的支持，如`swipe`、`tap`等，常用于触摸设备的交互。 7. **更好的解绑策略**：在原始的Zepto中，当元素被移除时，与其相关的事件处理函数可能不会自动...
基于Winter和Zepto.js完成的触屏手势库，提供了丰富的手势识别功能，使得开发者能够利用JavaScript轻松地实现类似于滑动、捏合、旋转、拖放等触摸操作。下面我们将深入探讨这个库的核心概念、工作原理以及如何在实际...
值得注意的是，Zepto.js对触屏事件进行了优化，如`.tap()`用于监听点击事件，`.swipe()`用于识别滑动操作，这些都是针对移动设备的特有事件。 五、Ajax请求 在Zepto.js中，`.ajax()`方法用于发起异步HTTP请求。它...
对于移动设备，Zepto的`touch`模块提供了触摸事件的支持，如`.tap()`, `.swipe()`, `.swipeLeft()`, `.swipeRight()`等，使开发者能够轻松处理触摸事件。 8. **Form处理** `form`模块扩展了表单相关的方法，如`....
basic：FrozenJS 的一些基础功能，包括模板引擎、tap 支持等。 ui：主要是一些触屏常用的 UI 组件，包括 dialog 等。 effect：非常用的特效库，特殊场景使用到是可以单独调用。 更多文档请查看： FrozenJS 能做什么 ...