touch.js的使用总结

Touch 手机端的操作

基本事件:

touchstart  //手指刚接触屏幕时触发

touchmove    //手指在屏幕上移动时触发

touchend     //手指从屏幕上移开时触发

touchcancel  //触摸过程被系统取消时触发(少用)


一、事件绑定
touch.on(element,types,callback);

参数描述:

element   element或string    元素对象、选择器

types  string 事件的类型(多为手势事件),可接受多个事件以空格分开;支持原生事件的透传

callback    function  事件处理函数, 移除函数与绑定函数必须为同一引用;


二、部分手势事件
1、缩放

pinchstart缩放手势起点

pinchend缩放手势终点

pinch缩放手势

pinchin收缩

pinchout放大

2、旋转

rotateleft向左旋转

rotateright向右旋转

rotate旋转

3、滑动

swipestart滑动手势起点

swiping滑动中

swipeend滑动手势终点

swipeleft向左滑动

swiperight向右滑动

swipeup向上滑动

swipedown向下滑动

swipe滑动

4、拖动

拖动开始    Dragstart拖动屏幕

拖动           drag拖动手势

拖动结束     dragend拖动屏幕

5、长按

hold    长按屏幕

6、敲击

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触发时调用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值