0%

移动端滑动事件

在移动端滑动,在一次滑动中可能触发多次事件,通过加锁可以解决

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
/**
* 左滑
* @param {object} e 事件对象
* @returns {boolean} 布尔值
*/
function isLeftSlide (e) {
var startX = gesture.startX;
var startY = gesture.startY;
if (gesture.slideLock) {
var t = e.originalEvent.changedTouches[0];
var deltaX = t.clientX - startX
var deltaY = t.clientY - startY
if (deltaX < -20 && deltaX > -40 && deltaY < 8 && deltaY > -8) {
gesture.slideLock = false
return true
} else {
return false
}
}
}
/**
* 右滑
* @param {object} e 事件对象
* @returns {boolean} 布尔值
*/
function isRightSlide (e) {
var startX = gesture.startX;
var startY = gesture.startY;

if (gesture.slideLock) {
var t = e.originalEvent.changedTouches[0];
var deltaX = t.clientX - startX
var deltaY = t.clientY - startY
if (deltaX > 20 && deltaX < 40 && deltaY < 8 && deltaY > -8) {
gesture.slideLock = false
return true
} else {
return false
}
}
}

function touchstart (e) {
console.log('e',e);
var t = e.originalEvent.changedTouches[0];
var startX = t.clientX;
var startY = t.clientY;
gesture.slideLock = true; // 滑动事件加锁

gesture.startX = startX;
gesture.startY = startY;
}
function touchmove (e) {
if (isLeftSlide(e)) {
alert('left');
}
if (isRightSlide(e)) {
alert('right');
}
}


$('body').touchstart(function(e){
touchstart(e);
});
$('body').touchmove(function(e){
touchmove(e);
});