touch.js——常见应用操作

基本事件：

touchstart   //手指刚接触屏幕时触发

touchmove    //手指在屏幕上移动时触发

touchend     //手指从屏幕上移开时触发

touchcancel  //触摸过程被系统取消时触发（少用）

一、事件绑定（常用，重要）

touch.on( element, types, callback );

功能描述：事件绑定方法，根据参数区分事件绑定和事件代理。

参数描述：

参数 类型 描述
element element或string 元素对象、选择器
types string 事件的类型（多为手势事件），可接受多个事件以空格分开；支持原生事件的透传
callback function 事件处理函数, 移除函数与绑定函数必须为同一引用;

部分手势事件

分类 参数 描述
缩放 pinchstart 缩放手势起点
pinchend 缩放手势终点
pinch 缩放手势
pinchin 收缩
pinchout 放大
旋转 rotateleft 向左旋转
rotateright 向右旋转
rotate 旋转
滑动 swipestart 滑动手势起点
swiping 滑动中
swipeend 滑动手势终点
swipeleft 向左滑动
swiperight 向右滑动
swipeup 向上滑动
swipedown 向下滑动
swipe 滑动
拖动开始 dragstart 拖动屏幕
拖动 drag 拖动手势
拖动结束 dragend 拖动屏幕
拖动 drag 拖动手势
长按 hold 长按屏幕
敲击 tap 单击屏幕
doubletap 双击屏幕


部分事件处理函数

属性 描述
originEvent 触发某事件的原生对象
type 事件的名称
rotation 旋转角度
scale 缩放比例
direction 操作的方向属性
fingersCount 操作的手势数量
position 相关位置信息, 不同的操作产生不同的位置信息
distance swipe类两点之间的位移
distanceX, x 手势事件x方向的位移值, 向左移动时为负数
distanceY, y 手势事件y方向的位移值, 向上移动时为负数
angle rotate事件触发时旋转的角度
duration touchstart 与 touchend之间的时间戳
factor swipe事件加速度因子
startRotate 启动单指旋转方法，在某个元素的touchstart触发时调用

小试牛刀：

公共

  1. <script src="http://touch.code.baidu.com/touch-0.2.14.min.js"></script>
  1. <body>
  2. <div id="playarea">
  3. <img id="target" draggable="false" src="img/cloud.png" class="show" >
  4. </div>
  5. </body>

》旋转rotate

》滑动swiper

》拖动drag

》单击tap,双击doubletap,长按hold

touch.on('#target', 'hold tap doubletap', function(ev){  }//多个手势同个效果，用空格隔开即可

事件(包括鼠标事件)发生的顺序如下： 

(1)touchstart

(2)mouseover

(3)mousemove(一次)

(4)mousedown

(5)mouseup

(6)click

(7)touchend

touch.js——常见应用操作的更多相关文章

  1. touch.js 手机端的操作手势

    使用原生的touchstart总是单击.长按有冒泡冲突事件,发现百度在几年开源的touch.js库,放在现在来解决手机端的操作手势,仍然很好用.

  2. touch.js——手机端的操作手势

    TOUCH.JS手势操作,例如一指拖动.两指旋 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指 ...

  3. 前端学习之touch.js与swiper学习

    Touch.js是移动设备上的手势识别与事件库,改框架基于原生js,操作简单,主要分drag,swipe,rotate,scale,tab,hold,touch操作. swiper是一个移动端触摸滑动 ...

  4. touch.js下载使用方式

    touch.js下载地址 https://gitee.com/mirrors/touch-js Touch 在开发移动端的应用中会使用到很多的手势操作,例如一指拖动.两指旋转等等,为了方便开放者快速集 ...

  5. Selenium 定位页面元素 以及总结页面常见的元素 以及总结用户常见的操作

    1. Selenium常见的定位页面元素 2.页面常见的元素 3. 用户常见的操作 1. Selenium常见的定位页面元素 driver.findElement(By.id());driver.fi ...

  6. 移动端上下滑动事件之--坑爹的touch.js

    下面的方法,不知道是操作方法不对还是啥.  在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...

  7. JavaScript常见集合操作

    JavaScript常见集合操作 集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高 缺点:无法遍历对象 for(let i=0;i<array.le ...

  8. 移动端上下滑动事件之--坑爹的touch.js

    原文   http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...

  9. touch.js - 移动设备上的手势识别与事件库

    Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...

随机推荐

  1. 5_find grep sed awk 详解

    find :查找文件系统中指定的文件.可以按文件名(-name)  权限(-perm) 归属人 查找. find   要查找文件的路径   表达式 *通配符  可以添加在文件名的任意位置 常用的例子( ...

  2. 数据库索引B-树和B+树

    一开始学习数据结构的时候,主要学习的是数组,队列,链表,队列,栈,树这些数据结构,其中树主要学习二叉树,平衡二叉树,二叉搜索树等这些子节点最多只有两个的树结构.但是,当我们接触数据库的时候,你会发现数 ...

  3. 认清Javascript的地位并编写合理的Javascript代码

    作为前端程序员,一定要认清javascript的地位,不要被它乱七八糟的特点所迷惑.JavaScript主要是用来操控和重新调整DOM,通过修改DOM结构,从而达到修改页面效果的目的. 要用这个中心思 ...

  4. 【搬运工】之——Selenium+IDEA+Maven+TestNG环境搭建（转）

    Selenium+IDEA+Maven+TestNG环境搭建 第一 安装java环境. 1. 下载并安装Jdk1.7或Jdk1.8 http://www.oracle.com/technetwork/ ...

  5. MongoDB副本集模式安装

    设备: 三个1G.20G.1核的虚拟机,系统是SentOS7 min 设置目录: Server1: mkdir -p /home/mongoshard/data/shard11 /home/mongo ...

  6. oracle查看锁和释放锁

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt108 Oracle数据库操作中,我们有时会用到锁表查询以及解锁和kill进程 ...

  7. java动态代理（JDK和cglib实现对比）

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt214 JAVA的动态代理 代理模式 代理模式是常用的java设计模式,他的特 ...

  8. sql优化策略之索引失效情况二

    详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp63   接第一篇索引失效分析:http://grefr.iteye.co ...

  9. Google推出移动网页开发者认证考试 价格99美元

    如果您是移动网页开发人员,希望了解您的编码实力,Google将推出一个认证流程,让您可以参加考试,如果您通过,可以在您的简历,网站和其他在线上显示电子徽章配置文件.           此外,潜在的雇 ...

  10. Linux-insmod/rmmod/lsmod驱动模块相关命令(10)

    insmod:加载模块 参数: -f 不检查目前kernel版本与模块编译时的kernel版本是否一致,强制将模块载入.-k 将模块设置为自动卸除.-m 输出模块的载入信息.-o   <模块名称 ...