zepto tap “点透”研究 (转)

解决方案一：

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”捕获的事件

扫描二维码关注公众号，回复： 673455 查看本文章

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

zepto tap “点透”研究 (转)

猜你喜欢