touch.js-常见应用操作

最新推荐文章于 2022-05-31 09:04:28 发布

jiojio冲冲冲

最新推荐文章于 2022-05-31 09:04:28 发布

阅读量2.6k

点赞数

基本事件：

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

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

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

touchcancel //触摸过程被系统取消时触发（少用）

touch.on( element, types, callback );

功能描述：事件绑定方法，根据参数区分事件绑定和事件代理。

参数描述：

参数	类型	描述
element	element或string	元素对象、选择器
types	string	事件的类型（多为手势事件），可接受多个事件以空格分开；支持原生事件的透传
callback	function	事件处理函数, 移除函数与绑定函数必须为同一引用;

部分手势事件

部分事件处理函数

属性	描述
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

关注