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对于网页设计师来说,是一款不 ...
随机推荐
- sublime text3开发python并设置快捷键
Package Control 安装方法 1.通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码: 2.Sublime T ...
- class对象详解
我们知道,对于java语言,我们一般先写一个类对象,表示对某一类对象概述,其中包括属性,方法等.我们在对类对象编译时,会产生一个.class对象,jvm在加载类对象时,是加载.class 对象文件,我 ...
- private ,friendly,public protected四种修饰符访问权限(从idea代码提示中看出)
文件一,本类中可以访问全部: package xsf; /** * Created by liwenj on 2017/7/25. */ public class A { private int x= ...
- jvm系列 (四) ---强、软、弱、虚引用
java引用 目录 jvm系列(一):jvm内存区域与溢出 jvm系列(二):垃圾收集器与内存分配策略 jvm系列(三):锁的优化 我的博客目录 为什么将引用分为不同的强度 因为我们需要实现这样一种情 ...
- Oracle实现分页查询的SQL语法汇总
1.无ORDER BY排序的写法.(效率最高) 经过测试,此方法成本最低,只嵌套一层,速度最快!即使查询的数据量再大,也几乎不受影响,速度依然! sql语句如下: ) TABLE_ALIAS ; 2. ...
- android-学习1 配置环境
转载注明出处,谢谢--http://www.cnblogs.com/JK-HYJ/ 前提:电脑先配置好java的环境-- adk_bundle下载安装地址:http://tools.android-s ...
- java读取txt文件内容
package read; import java.io.BufferedReader; import java.io.File; import java.io.FileReader; public ...
- 再起航,我的学习笔记之JavaScript设计模式21(命令模式)
命令模式 概念描述 命令模式(Command): 将请求与实现解耦并封装成独立的对象,从而使不同的请求对客户端的实现参数化 示例代码 命令模式我们可以看成是将创建模块的逻辑封装在一个对象里,这个对象提 ...
- 软件工程(GZSD2015)第三次作业提交进度
第三次作业题目请查看这里:软件工程(GZSD2015)第三次作业 开始进入第三次作业提交进度记录中,童鞋们,虚位以待哈... 2015年4月19号 徐镇.尚清丽,C语言 2015年4月21号 毛涛.徐 ...
- 团队作业8——Beta版本冲刺计划及安排
团队作业8--Beta版本冲刺计划及安排 经过紧张的Alpha阶段,很多组已经从完全不熟悉语言和环境,到现在能够实现初步的功能.下一阶段即将加快编码进度,完成系统功能.强化软件工程的体会. 凡事预则立 ...