一、与PC端事件的差异对比
1.PC端的mousemove、mouseup、mousedown等事件，在移动端会失效(或者使用不正常)
2.PC端的click事件可以使用，但是会有300ms的延迟问题
300ms的延迟问题：
1
2
3
4
5
6
7
8
| 1.click事件在移动手机开发中会有300ms的延迟问题，因为在手机早期，浏览器有大和缩小的功能，
用户在屏幕上点击两次之后，浏览器会触发放大或缩小的功能，因此浏览器做了一个处理，当触摸一
次后，在300ms这段时间内有没有触摸第二次，如果触摸了第二次，说明是触发放大或缩小功能，否
则的话就是click事件， 因此在click 的时候，用户必须等待300ms之后才会触发click事件。所
以当在移动端使用click事件的时候，会感觉到300ms的迟钝。
2.在实际应用中发现，300ms并不是绝对发生，当用户设置了viewport并禁止缩放时，大部分浏览器
会禁止300ms延迟，但在低版本安卓以及微信，qq等应用的内嵌webview中仍然会发生300ms延迟问题
|
二、移动端手势事件
1.touchstart : 手指按下的时候触发
2.touchmove :手指移动的时候触发
3.touchend ： 手指离开时触发
4.touchcancel : 事件被打断的时候触发(来电话等)
5.事件的执行顺序：
touchstart——touchmove——touchend——click
三、 Touch
Touch对象代表一个触点，可以通过event.touches[0]获取，每个触点包含位置，大小，形状，压力大小，和目标 element属性。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| {
screenX: 511,
screenY: 400,//触点相对于屏幕左边沿的Y坐标
clientX: 244.37899780273438,
clientY: 189.3820037841797,//相对于可视区域
pageX: 244.37,
pageY: 189.37,//相对于HTML文档顶部，当页面有滚动的时候与clientX=Y 不等
force: 1,//压力大小，是从0.0(没有压力)到1.0(最大压力)的浮点数
identifier: 1036403715,//一次触摸动作的唯一标识符
radiusX: 37.565673828125, //能够包围用户和触摸平面的接触面的最小椭圆的水平轴(X轴)半径
radiusY: 37.565673828125,
rotationAngle: 0,//它是这样一个角度值：由radiusX 和 radiusY 描述的正方向的椭圆，需要通过顺时针旋转这个角度值，才能最精确地覆盖住用户和触摸平面的接触面
target: {} // 此次触摸事件的目标element
}
|
identifier
这个属性大家可能有疑惑，使用 Chrome 的模拟器发现多次触摸动作，值始终不变。用真机测试则不会有问题(我这里用的safari连接mac调试)。每次触摸包括start,move,end这整个过程，标志符都不变。下一次触摸动作开始，标志符就会变化。
screenY clientY
在 safari 中 screenY与clientY值是相等的，在iOS微信中两个数值不等，但单位应该也不一样。
radiusX radiusY rotationAngle
测试过程中safari及微信内置浏览器都不支持这些属性，chrome模拟器可以。
TouchList
由Touch对象构成的数组，通过event.touches取到。一个Touch对象代表一个触点，当有多个手指触摸屏幕时，TouchList就会存储多个Touch对象，前面说到的identifier就用来区分每个手指对应的Touch对象。
TouchEvent
TouchEvent就是用来描述手指触摸屏幕的状态变化事件，除了一般DOM事件中event对像具备的属性，还有一些特有的属性
touches
一个TouchList对象，包含当前所有接触屏幕的触点的Touch对象，不论 touchstart 事件从哪个elment上触发。
targetTouches
也是一个TouchList对象，包含了如下触点的 Touch 对象：touchstart从当前事件的目标element上触发
changedTouches
也是一个 TouchList 对象，对于 touchstart 事件, 这个 TouchList 对象列出在此次事件中新增加的触点。对于 touchmove 事件，列出和上一次事件相比较，发生了变化的触点。对于 touchend ，列出离开触摸平面的触点（这些触点对应已经不接触触摸平面的手指）。
touchend这里要特别注意，touches和targetTouches只存储接触屏幕的触点，要获取触点最后离开的状态要使用changedTouches。
四、做一个touch事件库
只是练习原理，其中还有很多不全面，可以使用第三方库来实现效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
| ;(function(){
var query = function(selector){
//一开始调用$(选择器)就是需要执行init方法，因为需要得到元素才可以做下面的操作，所以这样的话就必须使用链式调用的样子，返回出来this对象
//其实本来方法中this都是指query.fn的对象，因为是执行了init方法后直接调用了tap方法，所以tap里面的this应该是指向调用者，就是init返回出来的值，
//但是又是query.fn对象的方法，所以需要返回出来this才能继续下面的方法调用，如果直接返回元素，就没有tap方法了，也就调用不了
return query.fn.init(selector);
}
query.fn = query.prototype = {
//初始化方法
init:function(selector){
if(typeof selector == 'string'){
this.element = document.querySelector(selector);
return this;
}
},
//单击事件
tap:function(handler){
this.element.addEventListener("touchstart",touchFn);
this.element.addEventListener("touchend",touchFn);
//声明按下时间和结束时间（用来判断是否是合理的单击操作）
var startTime,endTime;
//事件触发函数
function touchFn(e){
switch (e.type){
case "touchstart":
//记录按下时间
startTime = new Date().getTime();
break;
case "touchend" :
//记录结束时间
endTime = new Date().getTime();
if(endTime - startTime <= 400){
//回调
handler();
}
break;
}
}
},
doubleTap:function(handler){
this.element.addEventListener('touchstart',dbltouchFn);
this.element.addEventListener('touchend',dbltouchFn);
var count = 0;
var timerId;
function dbltouchFn(e){
switch (e.type){
case "touchstart":
count++;
clearTimeout(timerId);
timerId = setTimeout(function(){
count = 0;
},300)
break;
case "touchend" :
//记录结束时间
endTime = new Date().getTime();
if(count == 2){
//回调
handler();
count=0;
}
break;
}
}
},
longTap:function(handler){
this.element.addEventListener("touchstart",touchFn);
this.element.addEventListener("touchend",touchFn);
this.element.addEventListener("touchmove",touchFn);
//事件触发函数
function touchFn(e){
switch (e.type){
case "touchstart":
//按下500ms后才算是长按，执行回调函数
timerId = setTimeout(function(){
handler();
},500)
break;
case "touchend" :
clearTimeout(timerId)
break;
case "touchmove" :
clearTimeout(timerId)
break;
}
}
},
swiperLeft:function(handler){
this.element.addEventListener("touchstart",touchFn);
this.element.addEventListener("touchend",touchFn);
//声明坐标变量
var startX,startY,endX,endY;
function touchFn(e){
switch (e.type){
case "touchstart":
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
break;
case "touchend" :
endX = e.changedTouches[0].pageX;
endY = e.changedTouches[0].pageY;
//1.判断是上下滑动还是左右滑动
//2.判断是左还是右(阈值);
if(Math.abs(endX - startX) >= Math.abs(endY - startY) && ((startX - endX) > 40)){
handler();
}
break;
}
}
}
}
query.fn.init.prototype = query.fn;
window.$ = window.query = query;
})();
|