Zepto 的点透问题如何解决？

解决方案一

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

然后给需要“无延迟点击”的元素绑定 click 事件（注意不再是绑定 zepto 的 tap 事件）即可。

当然，你也可以不在 body 上初始化它，而在某个 dom 上初始化，这样，只有这个 dom 和它的子元素才能享受“无延迟”的点击；

解决方案二：

自己按照上述 fastclcik 的思路再开发一套东西，需要

1. 一个优先于下面的“divClickUnder”捕获的事件
2. 并且通过这个事件阻止掉默认行为（下面的“divClickUnder”对 click 事件的捕获，在 ios 的 safari，click 的捕获被认为和滚屏、点击输入框弹起键盘等一样，是一种浏览器默认行为，即可以被 event.preventDefault() 阻止的行为）。

如，将 tap 事件改为 touchend（虽然意思肯定不完全一样，而且不够优雅），这样就直接在“divTapAbove”被捕获，而不是在 body 上才被捕获了，满足了 1；再在内部使用 preventDefault() 解决了 2，

$divTapAbove.on('touchend',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 被点击有交互反应是获得焦点并弹起虚拟键盘），则会出现“点透”现象。在这种情况下，我们应当采用上述两种方法来避免“点透”。

原因分析：

问题产生的原因分析：

当我们在触屏上点击某个位置时候的时候，浏览器依次响应产生了几个事件，它们分别是：touchStart、touchEnd、click 事件，且 click 具有 300 毫秒的延迟时间。注意：即使你没有监听事件，事件依然存在的，浏览器默认行为。当单击 B 元素时候，事件触发先后顺序是先 touchestart->touchend->click , 问题将在这里出现。

当发生了单击事件后，touchstart 事件先执行 B 元素被隐藏了，接下来到 touchend 事件由于速度很快，所以 A 元素并没有响应；此时 click 事件由于延迟了 300ms 才执行，B 元素已经隐藏，click 单击发生了，由于没有了 B 元素，浏览器实现上会认为当次单击是对页面上的某个部分实行的，A 元素里相应的位置的地方（元素）响应了 click 事件。于是就出现了穿透现象；

• 注：
• 给 B 元素绑定 click 事件 （点击访问 DEMO) —— 不会穿透；
• 给 B 元素绑定 touchstart 事件 （点击访问 DEMO) ——出现穿透现象
• 给 B 元素绑定 touchend 事件 （点击访问 DEMO) ——出现穿透现象

移动端 click 事件 300 毫秒延迟：

用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。

因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。

更多面试题

如果你想了解更多的前端面试题，请点击下面进行选择,这里基本包涵了市场上的所有前端方面的面试题，让你面试更加顺利。

• HTML 面试题
• CSS 面试题
• JavaScript 面试题
• jQuery 面试题
• Vue.js 面试题
• React 面试题
• 算法 面试题
• AJAX/HTTP 面试题
• Babel 面试题
• BootStrap 面试题
• Electron 面试题
• Gulp 面试题
• Node.js 面试题
• 前端经验相关 面试题
• 前端综合 面试题
• Webpack 面试题
• 微信小程序 面试题

这些题库还在更新中，如果你有不错的面试题库欢迎分享给我，我整理后放上来；人人为我，我为人人，互帮互助，共同提高，祝大家都拿到心仪的Offer！