zepto.js介绍（持续更新）

前言：

　　zepto是一个简化版的jQuery，主要针对移动端开发。

　　简化了jQuery里很多的浏览器兼容性代码，jQuery的很多方法都被拿掉了（eg：slideUp）。

　　WP设备兼容性很差。

　　官方链接

　　目前还不够完善，开发中总会遇到一些问题，下面简单列举2个开发中遇到的问题：

1.animate方法：

　　问题：

　　　　WP设备中，回调方法不会等待动画执行完后再执行，而是和动画同步执行。

　　代码：　

$('#selector').animate({ 'width': '60%' }, 300, function() {
    $('#xx-button').show();
})

　　原因：

　　　　zepto里的animate方法实现机制和jQuery不同，zepto是基于css3的动画，而jQuery是基于队列缓存机制   

　　解决：

　　　　用css3的动画实现代替animate方法，eg：animate、tranform等。

2.tap事件穿透：

　　问题：

　　　　当两个元素重叠在一起，且都绑定了zepto的tap事件时，点击上一层元素时会触发下一层的事件，特别当下一层是input框时，必"穿透"。

　　代码：　　　　

$('#selector').on('tap', function() {
    // do something
})

　　原因：

　　　　Google的解释：tap事件冒泡到body上时才触发。 

　　解决：

• 使用github的fastclick库。
• 监听touchend事件，使用preventDefault()阻止冒泡。
• 使用css3的pointer-events＝true,pointer-events=none切换。
• 如果还不行，建议使用click代替tap。

PS：

　　移动端开发（WebApp、hybrid）中可以使用zepto，不过还是得谨慎。

转载于:https://www.cnblogs.com/tww316/p/4524415.html