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,不过还是得谨慎。

你可能感兴趣的:(js)