zepto.js介绍(持续更新)
2015-05-22 22:54
288 查看
前言:
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,不过还是得谨慎。相关文章推荐
- 持续更新-jQuery发微-关于jQuery和JS原生混用的方法
- 原生js常用方法集锦--持续更新中。。。
- JS常见代码块,持续更新......
- js、jq常用代码,持续更新中
- redis&memcached相关介绍(持续更新中)
- JS代码在IE和Firefox间的区别(持续更新中)
- js关于数组简易排序的一些写法(持续更新)
- JS 自定义代码库(持续更新)
- js兼容性大全(持续更新)
- JS 正则表达式常用的判断,持续更新
- Js 日常开发笔记(持续更新)
- 前端(js/css/html)那些小的知识点,持续更新......
- 前端(html,css,js)各种摘抄整理(持续更新ing)
- 旗舰版stm32开发板介绍---硬件篇(持续更新)
- js实用代码段(持续更新)
- Phoenix介绍(持续更新)
- 【内置】总结持续更新--js常用内置函数
- Android框架之路——整体介绍(持续更新...)
- 总结js常用函数和常用技巧(持续更新)
- Three.js示例简介(持续更新)