zepto 简介

  • jq虽然有一些衍生的插件可用在移动端上,但它有点大。
  • click 有,但有问题
  • onmouseover 无
  • onmousemoser 无

  • touch

  • tap 像 pc 端的 click

  • 300ms 用来判断点击有没有后续操作。

  • 为了确认用户是单击还是双击。

  • 由 iphone 也采用, android 后续采用。

  • 移动端的所有 click 都要慢 300ms,

  • 在移动端没有多少兼容问题,但 jq 有不少代码都是处理兼容的。

  • zepto 没有太多这些兼容代码,文件比较小。

  • zepto 本来的思想是让大家需要的功能自己加上去。所以核心代码只有7个模块。

  • 然后也并不是谁都会封装的,封装也使 zepto 发展比较慢。
  • 所以初学前期不建议去官网下载,而使用别人已经封装过其他功能的。

  • 如果后期自己有了一些使用经验,感觉不够用时,再去 githup 下载源码,封装自己的版本。

实例

点击 tap

```
$(function(){
$(document).tap(function(){
alert(1);
})
})
```

触摸,按上去但没有松开手 touchstart

```
$(function(){
$(document).on('touchstart',function(){
console.log(1);
})
})
```
  • 滑动,按住并移动 touchmove
  • 离开屏幕,有时也用来代替点击 touchend

  • 系统取消 touch 事件时。 touchcancel

    • 安卓移动结束时触发 touchcancel 事件 ,
    • 苹果正常触发 touchend 。
    • 类似的兼容有表单输入时的输入法调用问题。
  • 长按,750ms 时。 longTap

  • 单击,和 tap 差不多。 singleTap
  • 双击。 doubleTap

  • 与 jquery 不同的, event 事件。在电脑上只有鼠标,在手机上有多个手指。

  • 屏幕上的所有触点列表 e.touches

    $(function(){ $(document).on('touchstart',function(e){ console.log(e.touches); }) })

触点一按下时的坐标 e.touches[0].clientX

```
$(function(){
$(document).on('touchstart',function(e){
console.log(e.touches[0].clientX);
})
})
```
  • 位于 dom 上触点列表 e.targetTouches
  • 涉及当前事件的触点列表 e.changedTouches

  • 触点一离开时的坐标是多少?

    • 因为手机和电脑不同,手机会有多个触点情况。所以不能直接通过 e.clientX 方式获取坐标。
    • 移动端事件 event 里存在一个触点集合 touches 数组,通过获取数组的第一个元素来获取坐标位置,
    • 也就是第一个触点的坐标。 e.touches[0].clientX e.touches[0].clientY 。
  • 但是 touchend 事件代表触点离开屏幕,不存在触碰这一说。所以此时 e.touches 的长度是 0 。

  • 也就是说不能再通过 touchend 的处理函数中获取坐标了。
  • 需要通过 changedTouches 集合。

触点一离开时的坐标 e.changedTouches["0"].clientX

```
$(function(){
$(document).on('touchend',function(e){
console.log(e.touches); //长度为 0
console.log(e.changedTouches["0"].clientX);
})
})
```

如果需要获取 tap 的坐标,请使用 touchstart 。

```
$(function(){
$(document).on('touchstart',function(e){
console.log(e.changedTouches["0"].clientX);
})
})
```

从元素滑动 swipe

```
$(function(){
$(document).on('swipe',function(e){
console.log(1);
})
})
```

滑动方向, swipeUp/swipeRight/swipeDown/swipeLeft 如何斜着滑时,看哪边滑得多。

```
$(function(){
$(document).on('swipeUp',function(e){
console.log('swipeUp');
})
$(document).on('swipeRight',function(e){
console.log('swipeRight');
})
$(document).on('swipeDown',function(e){
console.log('swipeDown');
})
$(document).on('swipeLeft',function(e){
console.log('swipeLeft');
})
})
```

MD:

- 2017-03-17
- 文章来源:http://www.cnblogs.com/daysme
## zepto 简介 - jq虽然有一些衍生的插件可用在移动端上,但它有点大。
- click 有,但有问题
- onmouseover 无
- onmousemoser 无 - touch
- tap 像 pc 端的 click - 300ms 用来判断点击有没有后续操作。
- 为了确认用户是单击还是双击。 - 由 iphone 也采用, android 后续采用。
- 移动端的所有 click 都要慢 300ms, - 在移动端没有多少兼容问题,但 jq 有不少代码都是处理兼容的。
- zepto 没有太多这些兼容代码,文件比较小。 - zepto 本来的思想是让大家需要的功能自己加上去。所以核心代码只有7个模块。
- 然后也并不是谁都会封装的,封装也使 zepto 发展比较慢。
- 所以初学前期不建议去官网下载,而使用别人已经封装过其他功能的。 - 如果后期自己有了一些使用经验,感觉不够用时,再去 githup 下载源码,封装自己的版本。 ## 实例 **点击 tap** ```
$(function(){
$(document).tap(function(){
alert(1);
})
})
``` 触摸,按上去但没有松开手 touchstart ```
$(function(){
$(document).on('touchstart',function(){
console.log(1);
})
})
``` - 滑动,按住并移动 touchmove
- 离开屏幕,有时也用来代替点击 touchend - 系统取消 touch 事件时。 touchcancel
- 安卓移动结束时触发 touchcancel 事件 ,
- 苹果正常触发 touchend 。
- 类似的兼容有表单输入时的输入法调用问题。 - 长按,750ms 时。 longTap
- 单击,和 tap 差不多。 singleTap
- 双击。 doubleTap - 与 jquery 不同的, event 事件。在电脑上只有鼠标,在手机上有多个手指。 - 屏幕上的所有触点列表 e.touches ```
$(function(){
$(document).on('touchstart',function(e){
console.log(e.touches);
})
})
``` 触点一按下时的坐标 e.touches[0].clientX ```
$(function(){
$(document).on('touchstart',function(e){
console.log(e.touches[0].clientX);
})
})
``` - 位于 dom 上触点列表 e.targetTouches
- 涉及当前事件的触点列表 e.changedTouches - 触点一离开时的坐标是多少?
- 因为手机和电脑不同,手机会有多个触点情况。所以不能直接通过 e.clientX 方式获取坐标。
- 移动端事件 event 里存在一个触点集合 touches 数组,通过获取数组的第一个元素来获取坐标位置,
- 也就是第一个触点的坐标。 e.touches[0].clientX e.touches[0].clientY 。 - 但是 touchend 事件代表触点离开屏幕,不存在触碰这一说。所以此时 e.touches 的长度是 0 。
- 也就是说不能再通过 touchend 的处理函数中获取坐标了。
- 需要通过 changedTouches 集合。 触点一离开时的坐标 e.changedTouches["0"].clientX ```
$(function(){
$(document).on('touchend',function(e){
console.log(e.touches); //长度为 0
console.log(e.changedTouches["0"].clientX);
})
})
``` 如果需要获取 tap 的坐标,请使用 touchstart 。 ```
$(function(){
$(document).on('touchstart',function(e){
console.log(e.changedTouches["0"].clientX);
})
})
``` 从元素滑动 swipe ```
$(function(){
$(document).on('swipe',function(e){
console.log(1);
})
})
``` 滑动方向, swipeUp/swipeRight/swipeDown/swipeLeft 如何斜着滑时,看哪边滑得多。 ```
$(function(){
$(document).on('swipeUp',function(e){
console.log('swipeUp');
})
$(document).on('swipeRight',function(e){
console.log('swipeRight');
})
$(document).on('swipeDown',function(e){
console.log('swipeDown');
})
$(document).on('swipeLeft',function(e){
console.log('swipeLeft');
})
})
```

zepto 入门的更多相关文章

  1. Zepto入门

    Zepto 的介绍 #什么是 Zepto zepto是轻量级的JavaScript库,专门为移动端定制的框架. 与jquery有着类似的API,俗称:会jquery就会用zepto #zepto的特点 ...

  2. http://www.imooc.com/video/4767 zepto教学视频笔记

    一.介绍js移动端框架:zepto.js与jquery mobile 对比:zepto特点 1.与jquery相似度95%,会jquery基本会zepto: 2.API少,轻量级框架 3.移动端无缝接 ...

  3. 支持触屏的zepto轮播图插件

    占个座,有时间再写,呵呵 关于zepto.js,官方标准版是不支持touch的.可以去github下载压缩包,里面有所有支持的模块.我用的zepto.js,是经过打包的,包括polyfill zept ...

  4. Zepto.js入门介绍

    GitHub Zepto Zepto的一些可选功能是专门针对移动端浏览器的:因为它的最初目标在移动端提供一个精简的类似jquery的js库. Zepto不支持旧版本的Internet Explorer ...

  5. 11-移动端开发教程-zepto.js入门教程

    Zepto.js是一个轻量级的针对现代浏览器的JavaScript库, 它与jquery有着类似的api. 如果你会用jquery,那么你也会用zepto. 1. Why Zepto.js? API类 ...

  6. zepto快速入门教程

    * zepto* 特点:1.体积8kb2.针对移动端的框架3.语法同jquery大部分一样,都是$为核心函数4.目前功能完善的框架体积最小的左右* 同jquery相似的语法核心:$--作为函数使用参数 ...

  7. Javascript快速入门(下篇)

    Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构 ...

  8. Backbone入门

    Backbone入门讲解 Backbone是一个实现了web前端mvc模式的js框架. 一种解决问题的通用方法,我们叫做模式. 设计模式:工厂模式,适配器模式,观察者模式等,推荐js设计模式这本书.设 ...

  9. 学习web前端怎样入门?初学者赶紧看过来!

    web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门.初级.中级.高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是 ...

随机推荐

  1. 20165305 苏振龙《Java程序设计》第七周学习总结

    第十一章 JDBC技术在数据库开发中占有很重要的地位,JDBC操作不同的数据库仅仅是连接方式上的差异而已,使用JDBC的应用程序一旦和数据库建立连接,就可以使用JDBC提供的API操作数据库. 当查询 ...

  2. maven 入门 (一)

    纠结了好久,到底要不要写一份maven入门的所谓“教程”,有好几次想写一下,但是都放弃了,因为网上的太多了,而且都很好,但是现在决定了,还是要写出来,因为者有我自己的理解.所以我想写一份教程出来. 首 ...

  3. centos下搭建Jenkins持续集成环境(安装jenkins)

    1.安装JDK yum install -y java 2.安装jenkins 添加Jenkins库到yum库,Jenkins将从这里下载安装. 1 wget -O /etc/yum.repos.d/ ...

  4. Python+OpenCV图像处理(十二)—— 图像梯度

    简介:图像梯度可以把图像看成二维离散函数,图像梯度其实就是这个二维离散函数的求导. Sobel算子是普通一阶差分,是基于寻找梯度强度.拉普拉斯算子(二阶差分)是基于过零点检测.通过计算梯度,设置阀值, ...

  5. Django框架----Object Relational Mapping(ORM)

    Django中的ORM Django项目使用MySQL数据库 1. 在Django项目的settings.py文件中,配置数据库连接信息: DATABASES = { "default&qu ...

  6. JavaScript 中禁止用户右键菜单,复制,选取,Ctrl,Alt,Shift. 获取宽高,清除浮动

    //禁用右键菜单 document.oncontextmenu = function(){ event.returnValue = false; } //禁用选取内容 document.onselec ...

  7. SRTP参数及数据包处理过程(转)

    源: SRTP参数及数据包处理过程

  8. django模型的crud操作

    一个建立好的模型,django会生成一套完整的API,以便对对象进行crud操作,下面就详细介绍crud操作. 先说一下操作环境: python2.7, django1.11.8, win7系统,借助 ...

  9. Yii笔记:打印sql、Form表单、时间插件、Mysql的 FIND_IN_SET函数使用、是否是post/ajax请求

    语句部分: yii1版本打印最后一条执行的SQL: $this->getDbConnection()->createCommand()->select()->from()-&g ...

  10. MySQL更改relay-bin名称导致同步停止的解决办法

    今天在优化io的时候,移动了从库relay-bin的位置,并将hostname部分去掉了,启动后,从库slave状态如下: mysql> show slave status\G; ******* ...