JS事件对象--移动端事件--TouchJS使用

1.事件代理：
touch.on(element, types, selector,callback);
功能描述：事件绑定方法，根据参数区分事件绑定和事件代理。
参数描述：

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

(1).touch.on中的手势事件

分类

参数

描述

缩放

pinchstart

缩放手势起点

pinchend

缩放手势终点

pinch

缩放手势

pinchin

收缩

pinchout

放大

旋转

rotateleft

向左旋转

rotateright

向右旋转

rotate

旋转

滑动

swipestart

滑动手势起点

swiping

滑动中

swipeend

滑动手势终点

swipeleft

向左滑动

swiperight

向右滑动

swipeup

向上滑动

swipedown

向下滑动

swipe

滑动

拖动开始

dragstart

拖动屏幕

拖动

drag

拖动手势

拖动结束

dragend

拖动屏幕

拖动

drag

拖动手势

长按

hold

长按屏幕

敲击

tap

单击屏幕

doubletap

双击屏幕

(2)事件处理函数：

属性	描述
originEvent	触发某事件的原生对象
type	事件的名称
rotation	旋转角度
scale	缩放比例
direction	操作的方向属性
fingersCount	操作的手势数量
position	相关位置信息, 不同的操作产生不同的位置信息
distance	swipe类两点之间的位移
distanceX	x手势事件x方向的位移值, 向左移动时为负数
distanceY	手势事件y方向的位移值, 向上移动时为负数
angle	rotate事件触发时旋转的角度
duration	touchstart 与 touchend之间的时间戳
factor swipe	事件加速度因子
startRotate	启动单指旋转方法，在某个元素的touchstart触发时调用

**

应用实际例子：(添加事件)

**
touch.on使用方法:
一般适用于手机端

touch.on的不同写法：
	//(1)添加单个事件时：(即为第2个参数为1个时)
	touch.on("#wrap","tap",function(e)
	{
		var ev=e||window.event;
		ev.preventDefault();
		alert("点击");
	})
	//(2)添加多个事件时：（即为第二个参数为多个时要以空格分开书写）
	touch.on("#wrap","tap doubletap",function(e){
		var ev=e||window.event;
		ev.preventDefault();
		alert("点击");
	})
	//(3)touch.on的添加一个事件的另一种写法：(wrap在外部事先获得)
	var wrap=document.querySelector('#wrap');
	touch.on(wrap,"tap",function(e){
		var ev=e||window.event;
		ev.preventDefault();
		alert("点击");
	})
	//注意点：建议添加阻止默认事件

**

应用例子:(拖拽)

**

<!-- 引入touch.js -->
<script type="text/javascript" src="touch.min.js"></script>
<script type="text/javascript">
	//(1)获取当前点击所在位置使用tap，拖拽相对于起始点的位置使用drag函数
	touch.on("#wrap","tap drag",function(e){
		var ev=e||window.event;
		ev.preventDefault();
		//1.点击所在位置(position函数,相对于视窗而言,含有x,y的值)
		console.log(ev.position.x,ev.position.y);
		//2.distanceX,x或者distanceY,y是两点之间的偏移量
		console.log(event.x,event.y);
	})

   //(2) 下述例子为拖拽标签移动小例子--transform实现位置改变
	   //taransform是针对于标签的最初始状态
   var wrap=document.querySelector("#wrap");
   var dis_x=dis_y=0;
   var last_x=last_y=0;
	touch.on("#wrap","drag",function(e){
		var ev=e||window.event;
		ev.preventDefault();
		disx=event.x+last_x;;
		disy=event.y+last_y;;
		wrap.style.transform='translate3d('+disx+'px,'+disy+'px,0)';
	})
	touch.on("#wrap","dragend",function(e)
	{
			var ev=e||window.event;
		ev.preventDefault();
		last_x=disx;
		last_y=disy;
	})
</script>

**

应用例子(旋转)

**

–应用:手势事件rotate,事件处理函数rotation,判断单指操作函数startRotate;

//wrap为一个定义的div标签的id名，其css样式为：
#wrap{width:200px;	height:200px;background:red;position:absolute;top:100px;left:100px;}
//获取对应标签
var wrap=document.querySelector("#wrap");
	//记录角度的上次的值
	var last_deg=0;
	//刚刚点击的那一刻，允许单指旋转操作
	function ds_finger(e)
	{  
		var ev=e||window.event;
		ev.startRotate();
		ev.preventDefault();

	}
	touch.on("#wrap","touchstart",ds_finger);

	//transform是针对于最初始状态
	//rotation:旋转角度大小，是当前度数
	function rotate(e)
	{
		var ev=e||window.event;
		//旋转角度
        var deg=ev.rotation+last_deg;
		//判断旋转结束的条件
		if(ev.fingerStatus=="end")
		{
             last_deg=deg;
		}
		wrap.style.transform="rotate("+deg+"deg)";
	}
	touch.on("#wrap","rotate",rotate);

应用例子：(缩放)

–应用：手势事件：pinch,事件处理函数scale

//wrap为一个定义的div标签的id名，其css样式为：
#wrap{width:200px;	height:200px;background:red;position:absolute;top:100px;left:100px;}
//获取对应标签
var wrap=document.querySelector("#wrap");
	//缩放比例：scale，每次开始比例都是1.
	//例如：最初状态为300px
	// 第一次放大1.2倍--得到360
	//第二次放大1.5倍--得到360*1.5
	// transform:每次针对原始状态
	// 第二次的scale*第一次的scale;
	//需要真机测试
	var last_scale=1;
	function pinch(e)
	{
		var ev=e||window.event;
		var scale=event.scale;
		var newScale=last_scale*scale;
        if(ev.fingerStatus=="end")
        {
        	last_scale=newScale;
        }
        wrap.style.transform="scale("+newScale+")";
	}
	touch.on(wrap,"pinch",pinch);