touch.js的一些API

最新推荐文章于 2022-07-29 15:21:38 发布

导乐符

最新推荐文章于 2022-07-29 15:21:38 发布

阅读量1.4k

点赞数

分类专栏： js

js 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了TOUCH.JS库中各种手势操作的实现方法，包括一指拖动、两指旋转、缩放等。讲解了事件绑定、配置、代理及解除绑定等核心功能，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文地址在这里：https://blog.youkuaiyun.com/wangjiaohome/article/details/49364177

实在没看到转载按钮在哪里，直接复制过来了，格式都没整理，看原文比较清晰，这里太混乱

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触发时调用
小试牛刀：
公共

》旋转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);

功能描述：触发某个元素上的某事件。

参数描述：同上
---------------------
作者：大小都是愁
来源：优快云
原文：https://blog.youkuaiyun.com/wangjiaohome/article/details/49364177
版权声明：本文为博主原创文章，转载请附上博文链接！