前言:

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

zepto.js介绍(持续更新)的更多相关文章

  1. zepto.js介绍

    是一个阉割版的jQuery zepto不支持jQuery过于复杂的选择器,比如:first :last :eq zepto如果要用动画必须再次引包 zepto能将css3中transition支持的动 ...

  2. maven常用命令介绍(持续更新)

    一.Maven的基本概念 主要服务于基于Java平台的项目构建,依赖管理和项目信息管理. 1.1.项目构建 项目构建过程包括[清理项目]→[编译项目]→[测试项目]→[生成测试报告]→[打包项目]→[ ...

  3. StringUtils工具类常用方法介绍(持续更新)

    StringUtils方法的操作对象是java.lang.String类型的对象,是JDK提供的String类型操作方法的补充,并且是null安全的(即如果输入参数String为null则不会抛出Nu ...

  4. Phoenix介绍(持续更新)

    现有hbase的查询工具有很多如:Hive,Tez,Impala,Shark/Spark,Phoenix等.今天主要记录Phoenix. phoenix,中文译为“凤凰”,很美的名字.Phoenix是 ...

  5. 【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)

    Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包 ...

  6. 【 js 基础 】【 源码学习 】源码设计 (持续更新)

    学习源码,除了学习对一些方法的更加聪明的代码实现,同时也要学习源码的设计,把握整体的架构.(推荐对源码有一定熟悉了之后,再看这篇文章) 目录结构:第一部分:zepto 设计分析第二部分:undersc ...

  7. Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  8. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  9. 总结js常用函数和常用技巧(持续更新)

    学习和工作的过程中总结的干货,包括常用函数.常用js技巧.常用正则表达式.git笔记等.为刚接触前端的童鞋们提供一个简单的查询的途径,也以此来缅怀我的前端学习之路. PS:此文档,我会持续更新. Aj ...

随机推荐

  1. 基于百度地图api + AngularJS 的入门地图

    转载请注明地址:http://www.cnblogs.com/enzozo/p/4368081.html 简介: 此入门地图为简易的“广州大学城”公交寻路地图,采用很少量的AngularJS进行inp ...

  2. Python之路Day19

    志不坚者智不达. 主要内容:Django分页.自定义simpletag.权限管理 Django分页 Django自带了一个分页功能,使用起来很方便.官方文档 先来看一下效果图: 后台代码: def c ...

  3. django-celery提供给顾客使用实例

    导入数据库 from djcelery import models as celery_models   celery_models.PeriodicTask.objects.create(...) ...

  4. (IOS)截图Demo

    思路是建一个UIView的子类,获取划动出的矩形,用协议将矩形传递给代理对象,依据该矩形完成图像数据的截取,并显示出来. 截图视图类: #import <UIKit/UIKit.h> @p ...

  5. (转)requirejs:杏仁的优化(almond)

    使用场景 什么情况下需要使用 almond 呢?假设你手头有个基于requirejs的小项目,所有业务代码加起来就几十K(压缩后可能更小).出于性能优化的考虑,你可能在想:如果能够去掉requirej ...

  6. C++惯用法:通过成员模板实现隐式转换(Coercion 强迫 by Member Template)

    Intent To increase the flexibility of a class template's interface by allowing the class template to ...

  7. 周根项《一分钟速算》全集播放&amp;下载地址

    点击图片就可以观看 ↓↓↓↓↓↓↓↓ 第1章:指算法 周根项<一分钟速算>第1章:指算法 第一节 对手的认识 周根项<一分钟速算>第1章:指算法 第二节 个位数比十位数大1乘以 ...

  8. Python模拟登陆

    模拟人人登陆 #encoding=utf-8 import urllib2 import urllib import cookielib def renrenBrower(url,user,passw ...

  9. HDU 1862 EXCEL次序 (排序水问题)

    Problem Description Excel对能够记录一组由任意列排序指定.现在,请把你编译的代码类似特征.   Input 測试输入包括若干測试用例. 每一个測试用例的第1行包括两个整数 N ...

  10. 【转】URL和URI的区别

    [转]URL和URI的区别 译者:华科小涛:http://www.cnblogs.com/hust-ghtao/: 初学http协议,就被这两个相似的术语搞蒙了,查了很多资料,总算搞清楚了.(找资料还 ...