移动端滑动事件

JavaScript › JQuery

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

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
/**
    * 左滑
    * @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);
   });