touch.js——常见应用操作
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触发时调用 |
小试牛刀：
公共
- <script src="http://touch.code.baidu.com/touch-0.2.14.min.js"></script>
- <body>
- <div id="playarea">
- <img id="target" draggable="false" src="img/cloud.png" class="show" >
- </div>
- </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——常见应用操作的更多相关文章
- touch.js 手机端的操作手势
使用原生的touchstart总是单击.长按有冒泡冲突事件,发现百度在几年开源的touch.js库,放在现在来解决手机端的操作手势,仍然很好用.
- touch.js——手机端的操作手势
TOUCH.JS手势操作,例如一指拖动.两指旋 基本事件: touchstart //手指刚接触屏幕时触发 touchmove //手指在屏幕上移动时触发 touchend //手指 ...
- 前端学习之touch.js与swiper学习
Touch.js是移动设备上的手势识别与事件库,改框架基于原生js,操作简单,主要分drag,swipe,rotate,scale,tab,hold,touch操作. swiper是一个移动端触摸滑动 ...
- touch.js下载使用方式
touch.js下载地址 https://gitee.com/mirrors/touch-js Touch 在开发移动端的应用中会使用到很多的手势操作,例如一指拖动.两指旋转等等,为了方便开放者快速集 ...
- Selenium 定位页面元素 以及总结页面常见的元素 以及总结用户常见的操作
1. Selenium常见的定位页面元素 2.页面常见的元素 3. 用户常见的操作 1. Selenium常见的定位页面元素 driver.findElement(By.id());driver.fi ...
- 移动端上下滑动事件之--坑爹的touch.js
下面的方法,不知道是操作方法不对还是啥. 在 zepto.js 里面加那一段代码不起作用 百度的 touch.js 是可以用的,但是使用方式 和 zepto有点不一样. 解决方案:参照这个链接地址 ...
- JavaScript常见集合操作
JavaScript常见集合操作 集合的遍历 FOR循环(效率最高) 优点:JavaScript最普遍的for循环,执行效率最高 缺点:无法遍历对象 for(let i=0;i<array.le ...
- 移动端上下滑动事件之--坑爹的touch.js
原文 http://blog.csdn.net/minidrupal/article/details/39611605 移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和htm ...
- touch.js - 移动设备上的手势识别与事件库
Touch.js 是移动设备上的手势识别与事件库, 由百度云Clouda团队维护,也是在百度内部广泛使用的开发工具.Touch.js手势库专为移动设备设计.Touch.js对于网页设计师来说,是一款不 ...
随机推荐
- Django 学习笔记（五）模板标签
关于Django模板标签官方网址https://docs.djangoproject.com/en/1.11/ref/templates/builtins/ 1.IF标签 Hello World/vi ...
- python专题-Mysql数据库（python2._+ Mysqldb）
Python使用MySQL数据库 MySQLdb驱动从2014年1月停止了维护. Python2 MySQLdb 一,安装mysql 如果是windows 用户,mysql 的安装非常简单,直接下载安 ...
- Linux下C/C++和lua交互-Table
本来这些文章都是在我的个人网站www.zhangyi.studio,目前处在备案状态,暂时访问不了,所以搬到这边. 最近这两天需要弄清楚C++和lua间相互调用和数据传递,废话不多说,直接上过程. ...
- http长连接与短连接
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp23 http长连接与短连接 一.长连接与短连接: 长连接:client方与 ...
- 第3阶段——内核启动分析之start_kernel初始化函数(5)
内核启动分析之start_kernel初始化函数(init/main.c) stext函数启动内核后,就开始进入start_kernel初始化各个函数, 下面只是浅尝辄止的描述一下函数的功能,很多函数 ...
- 百度AI开放平台- API实战调用
百度AI开放平台- API实战调用 一. 前言 首先说一下项目需求. 两个用户,分别上传了两段不同的文字,要计算两段文字相似度有多少,匹配数据库中的符合条件的数据,初步估计列出来会有60-1 ...
- main方法和args参数
第一次接触java常常奇怪main方法和其参数有什么用.我们只知道main方法是程序入口,其实main方法同时也是一个可以手动调用的静态方法. 我们可以利用main方法写简单的一个递归程序 publi ...
- servlet 返回json 数据
后端的数据需要返回简单的json数据: 发现通过双引号和单引号:" { 'name':123 } "的方式返回失败. 需要通过\转义里边的双引号: response.getWr ...
- MPLS VPN随堂笔记1
MPLS VPN 基础 1.MPLS vpn架构的特点 1.1.允许不同CE传递相同私网路由 1.2.SP内部(所有P路由器)不需要学习CE路由 1.3.无安全保障但有带宽保障(跟SP租用服务) 2. ...
- 转：swagger 入门
前言 swagger ui是一个API在线文档生成和测试的利器,目前发现最好用的. 为什么好用?Demo 传送门 支持API自动生成同步的在线文档 这些文档可用于项目内部API审核 方便测试人员了解A ...