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). ...
随机推荐
- [LC] 246. Strobogrammatic Number
A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...
- 国产ROM纷争升级 能否诞生终结者?
能否诞生终结者?" title="国产ROM纷争升级 能否诞生终结者?"> 相比iOS系统的低硬件高流畅,安卓系统就显得"逼格"低了许多.先不说 ...
- LeetCode 刷题记录(6-10题)
6 Z 字形变换(题目链接) class Solution: def convert(self, s, numRows): """ :type s: str :type ...
- 你还记得2017年火爆的VR街机店,这一年他们过得还好吗?
对于当下太过急于成功.一夜暴富的人们来说,似乎总是会急不可耐地去抓住每一个有可能成为大势的风口.在这份普遍存在的浮躁心理下,蕴含着极大的不确定性--既让大众认识到太多的创新产品和服务,也让很多参与者痛 ...
- IPSec 传输模式下ESP报文的装包与拆包过程 - 择日而终的博客
一.IPsec简介 IPSec ( IP Security )是IETF(Internet Engineering Task Force,Internet工程任务组)的IPSec小组建立的一组IP安全 ...
- HAProxy实现动静分离和负载均衡
由于电脑配置渣,带不动多台虚拟机,所以采用httpd虚拟主机的方式来实现 1 2 3 CentOS 6.7 httpd: 2.2.15 HAProxy: 1.5.4 主机规划 1 2 3 4 5 - ...
- rsync auth failed on module xxx
rsync 报错 "auth failed on module xxx", 一般有三种情况造成: 密码文件格式错误: 服务端密码文件的格式是: user:password 每个一行 ...
- 每日背单词 - Jun.
6月1日裸辞,计划休息到端午节后,这段时间玩的确实很开心,每天和朋友一起吹灯拔蜡:好不自在,可惜假期马上结束了,从今天开始恢复学习状态. 2018年6月1日 - 2018年6月14日 辞职休假 201 ...
- 从社交到IP 庞大手游玩家大军迈向社群化之路
庞大手游玩家大军迈向社群化之路" title="从社交到IP 庞大手游玩家大军迈向社群化之路"> 移动互联网及相关智能设备的快速迭进,不仅改变了我们的生活方式,也彻 ...
- Git的安装与TortoiseGit的安装和汉化
下载Git 进入https://git-scm.com/downloads 可以看到如下界面 因为我是windows系统,选择windows即可. 有的朋友因为网络慢的一些原因不能很快下载下来,可以进 ...