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){ }//多个手势同个效果,用空格隔开即可
-----------------------------------------------------------------------------------------------------------------------------------------------
二、事件配置
touch.config(config) //对手势事件库进行全局配置。
功能描述:对手势事件库进行全局配置。
参数描述:
{
tap: true, //tap类事件开关, 默认为true
doubleTap: true, //doubleTap事件开关, 默认为true
hold: true, //hold事件开关, 默认为true
holdTime: 650, //hold时间长度
swipe: true, //swipe事件开关
swipeTime: 300, //触发swipe事件的最大时长
swipeMinDistance: 18, //swipe移动最小距离
swipeFactor: 5, //加速因子, 值越大变化速率越快
drag: true, //drag事件开关
pinch: true, //pinch类事件开关
}
三、事件代理
touch.on( delegateElement, types, selector, callback );
功能描述:事件代理方法。
参数描述:
参数 | 类型 | 描述 |
---|---|---|
delegateElement | element或string | 事件代理元素或选择器 |
types | string | 手势事件的类型, 可接受多个事件以空格分开;支持原生事件的透传。 |
selector | string | 代理子元素选择器, |
callback | function | 事件处理函数,如需了解手势库支持的新属性 |
四、解除事件代理、解除事件绑定
touch.off( delegateElement, types, selector, callback )//解除某元素上的事件代理。
touch.off( element, types, callback )//解除某元素上的事件绑定,根据参数区分事件绑定和事件代理。
五、触发事件
touch.trigger(element, type);
功能描述:触发某个元素上的某事件。
参数描述:同上
touch.js——手机端的操作手势的更多相关文章
- touch.js 手机端的操作手势
使用原生的touchstart总是单击.长按有冒泡冲突事件,发现百度在几年开源的touch.js库,放在现在来解决手机端的操作手势,仍然很好用.
- js手机端判断滑动还是点击
网上的代码杂七杂八, 我搞个简单明了的!! 你们直接复制粘贴, 手机上 电脑上 可以直接测试!!! 上图: 上代码: <!DOCTYPE html> <html lang=&q ...
- [js开源组件开发]js手机端浮层控件,并有多种弹出小提示,兼容pc端浏览器
js dialog组件,包含alert和confirm的实现 本组件所有的资源均在github上可以查看源代码 GitHub 本dialog的组件的例子请在这里查看 demo dialog js di ...
- js 手机端触发事事件、javascript手机端/移动端触发事件
处理Touch事件能让你跟踪用户的每一根手指的位置.你可以绑定以下四种Touch事件: touchstart: // 手指放到屏幕上的时候触发 touchmove: // 手指在屏幕上移动的时候触发 ...
- JS 手机端多张图片上传
代码如下 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="u ...
- JS手机端去除默认自带的选择复制菜单
在需要的div上添加以下控制-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: ...
- js手机端和pc端加载不同的样式
function loadCSS() { if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android| ...
- 原生js手机端触摸下拉刷新
废话不多说,直接上代码,这里感谢我的好朋友,豆姐 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- js手机端图片弹出方法
1 $("img").click(function(){ //获取窗口可视大小 var width=$(window).width(); var height=$(window). ...
随机推荐
- Qt 多线程QThread实现方法之一
基本思想 在主线程中,哪里需用多线程,就在哪里创建一个QThread实例: 把耗时操作封装到一个继承于QObject的子类(这里叫做工作类Worker)槽函数中: 创建QThread实例和Worker ...
- 新特DEV1光速发布背后:原来“开公司”也能风驰电掣
去年12月16日,总融资额达到200亿元的蔚来汽车正式推出电动SUV车型ES8:去年12月22日,威马汽车宣布最新一轮融资,累计获得120亿元的融资额:今年1月29日,小鹏汽车宣布启动总额为22亿元人 ...
- Linux那些事——GTK+, Qt, Gnome, KDE, xWindow, xOrg区别
Linux那些事--GTK+, Qt, Gnome, KDE, xWindow, xOrg区别 Linux不仅内核开源,系统配置也是高度可定制化的,其中就包括我们所熟知的图形界面,从桌面环境,主题,字 ...
- AVFoundation Programming Guide(官方文档翻译4)Editing - 编辑
新博客:完整版 - AVFoundation Programming Guide 分章节版:- 第1章:About AVFoundation - AVFoundation概述- 第2章:Using A ...
- Replace into 与Insert into on duplicate key update的区别
前提条件:除非表有一个PRIMARY KEY或UNIQUE索引,否则,使用这2条语句没有意义.该语句会与INSERT相同 1. Replace into (1) 添加相同的主键 操作前 ...
- CORS’s source, Principle and Implementation
跨域资源共享(CORS) 是一种机制,它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源.当一个资源从与该资源 ...
- <HAOI2008>硬币购物
和神奇dp的战斗 还有容斥原理 终于get到了 #include<cstdio> #include<cstring> #include<iostream> #inc ...
- rpm方式安装MySQL后在命令行登录报错:ERROR 1045 (28000): Unknown error 1045
1.通过https://mirrors.tuna.tsinghua.edu.cn镜像源安装了MySQL5.7.22 rpm -ivh --force --nodeps https://mirrors. ...
- 让git push命令不再需要密码
最近利用jekyll写博客,为的就是博客管理方便,但是在上传博客的时候使用git push命令每次都得输入github帐号和密码特别的不方便,于是就搜了一下. 在这篇文章里提到,GitHub获得远程库 ...
- 千亿VR市场 将被国内厂商玩坏多少?
将被国内厂商玩坏多少?" title="千亿VR市场 将被国内厂商玩坏多少?"> 智能硬件行业在不断寻求新的突破口,当智能手机.平板.电视.家电等都司空见惯之后,能 ...