Zepto-based Touch function encapsulation

When mobile uses Zepto to do some touch-based animations, a library of functions needs to be developed.

Function: Instantiating an object later can, trigger the corresponding event, can return to me, the current moving direction and the X-axis or the Y-axis of the movement of the displacement.

varTouchdirection = function(e) {    varStartthat = {}, movethat = {}; This. Touchstarteven = function(e) {Startthat.startx = e.touches[0].pagex; Startthat.starty = e.touches[0].pagey; This. startthat = Startthat;return  This; }; This. Touchmoveeven = function(e) {MoveX = e.touches[0].pagex; Movey = e.touches[0].pagey; TEMPX = This. Startthat.startx-movex; Tempy = This. Startthat.starty-movey; ABSTEMPX =Math. ABS (TEMPX); Abstempy =Math. ABS (Tempy); Angletouch = Abstempx/abstempy;if(Tempx <0&& Angletouch >=1) {//right mouse swipeMovethat.direction =' right '; Movethat.movex = abstempx; This. movethat = Movethat;return  This; }if(Tempx >0&& Angletouch >=1) {//left mouse slideMovethat.direction =' left '; Movethat.movex = abstempx; This. movethat = Movethat;return  This; }if(Tempy >0&& Angletouch <1) {//Slide upMovethat.direction =' Up '; Movethat.movey = Abstempy; This. movethat = Movethat;return  This; }if(Tempy <0&& Angletouch <1) {//SlideMovethat.direction =' Down '; Movethat.movey = Abstempy; This. movethat = Movethat;return  This; }    }; This. Touchendeven = function(){         This. Startthat =NULL; This. Movethat =NULL; };};
  
 

   
  

  
1
   
  

  
2
   
  

  
3
   
  

  
4
   
  

  
5
   
  

  
6
   
  

  
7
   
  

  
8
   
  

  
9
   
  

  
10
   
  

  
11
   
  

  
12
   
  

  
13
   
  

  
14
   
  

  
15
   
  

  
16
   
  

  
17
   
  

  
18
   
  

  
19
   
  

  
20
   
  

  
21st
   
  

  
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
  
 

How to use:

varTouchresult =NewTouchdirection ();varTouchstartev = function(e){    varthat = Touchresult.touchstarteven (e); Console.log (that.startthat);};varTouchmoveev = function(e) {    varthat = Touchresult.touchmoveeven (e); Console.log (that.movethat);};varTouchendev = function(e) {    varthat = Touchresult.touchendeven (e);}; $('. Test '). On (' Touchstart ', Touchstartev); $ ('. Test '). On (' Touchmove ', Touchmoveev); $ ('. Test '). On (' Touchend ', Touchendev);
  
 

   
  

  
1
   
  

  
2
   
  

  
3
   
  

  
4
   
  

  
5
   
  

  
6
   
  

  
7
   
  

  
8
   
  

  
9
   
  

  
10
   
  

  
11
   
  

  
12
   
  

  
13
   
  

  
14
   
  

  
15
   
  

  
16
   
  

  
17
   
  

  
18
   
  

  
19
   
  

  
20
  
 

Results of the test run:

Example demo address: Dot Me

If you find it helpful, please click star below to give me a star. Thank you!

  

Zepto-based Touch function encapsulation