码迷,mamicode.com
首页 > Web开发 > 详细

touch.js——常见应用操作

时间:2017-09-26 10:42:10      阅读:270      评论:0      收藏:0      [点我收藏+]

标签:名称   actor   can   csdn   cin   区分   agg   position   rip   

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

小试牛刀:

 

公共

  1. <script src="http://touch.code.baidu.com/touch-0.2.14.min.js"></script>  
  1. <body>  
  2. <div id="playarea">  
  3.   <img id="target" draggable="false" src="img/cloud.png" class="show" >  
  4. </div>  
  5. </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

 

touch.js——常见应用操作

标签:名称   actor   can   csdn   cin   区分   agg   position   rip   

原文地址:http://www.cnblogs.com/wangyihong/p/7595333.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!