Mobile-side events common functions to organize backups

The Tap event Tap event is equivalent to the click Effect in a PC browser, although the Click event is still available on a touchscreen device, but on many devices, click has some latency, and if you want to quickly respond to a "click" event, you need a touch event.

Element.addeventlistener (' Touchstart ', function (e) {  var touches = e.touches[0];  Starttx = Touches.clientx;  Startty = Touches.clienty;}, False); Element.addeventlistener (' Touchend ', function (e) {  var touches = E.changedtouc Hes[0],    ENDTX = Touches.clientx,    endty = Touches.clienty;  Touch events are sensitive on some devices, resulting in a slight change in event coordinates when the finger is pressed and released  if (Math.Abs (STARTTX-ENDTX) < 6 && Math.Abs (Startty-endt Y) < 6) {    console.log (' Fire tap Event ');}  , False);

For the above code, you can encapsulate it again:

<button id= "BTN" > Click </button><script>varMysky ={tap:function(obj, fun) {varstart_x = 0, Start_y= 0; Obj.addeventlistener (' Touchstart ',function(e) {start_x= E.touches[0].clientx; Start_y= E.touches[0].clienty;//This property is not canonical under IE, their minimum value is not 0 but 2Document.addeventlistener (' Touchend ', Touend,false);              }); functionTouend (e) {varEndX = E.changedtouches[0].clientx, EndY= E.changedtouches[0].clienty; if(Math.Abs (endx-start_x) < 6 && Math.Abs (endy-start_y) < 6) {fun.call (obj,e); } document.removeeventlistener (' Touchend ', Touend,false);          }; }}   varBtn=document.getelementbyid ("BTN"); Mysky.tap (BTN,function() {alert (' I can click '); });</script>

The Doubletap event Doubletap event is an event that is triggered when the finger strikes the screen two times within the same position and within a very short time. In some browsers, the Doubletap event selects the text, and if you do not want the text selected, you can add User-select:none CSS properties to the element.

var istouchend = false, Lasttime = 0, Lasttx = null, Lastty = NULL, Firsttouchend = true, BODY = Document.body, DTaP   Timer, Starttx, Startty, StartTime;    Element.addeventlistener (' Touchstart ', function (e) {if (Dtaptimer) {cleartimeout (Dtaptimer);  Dtaptimer = null;    } var touches = e.touches[0];  STARTTX = Touches.clientx;   Startty = Touches.clienty;  }, False); Element.addeventlistener (' Touchend ', function (e) {var touches = e.changedtouches[0], Endtx = Touches.clientx, en    DTy = Touches.clienty, now = Date.now (), duration = Now-lasttime; First, make sure that you can trigger a single tap event if (Math.Abs (STARTTX-ENDTX) < 6 && Math.Abs (STARTTX-ENDTX) < 6) {//two taps between        The interval is guaranteed to be within 500 milliseconds if (Duration < 301) {//This tap position and the last tap position allow a certain range of error if (LASTTX!== null &&         Math.Abs (LASTTX-ENDTX) < Math.Abs (Lastty-endty) < "{Firsttouchend = true;        LASTTX = Lastty = null; ConsoLe.log (' Fire double Tap event ');      }} else{Lasttx = ENDTX;    Lastty = Endty;    }} else{Firsttouchend = true;  LASTTX = Lastty = null;  } lasttime = Now;}, false); On IOS Safari, finger tapping on the screen is too fast,//There is a chance that the second will not respond to the Touchstart and Touchend events//The touch of a finger for a long time does not trigger the click if (~navigator.usera Gent.tolowercase (). indexOf (' iphone OS ') {body.addeventlistener (' Touchstart ', function (e) {startTime = date.no  W ();    }, True);        Body.addeventlistener (' Touchend ', function (e) {var nolongtap = Date.now ()-StartTime < 501;          if (firsttouchend) {firsttouchend = false; if (nolongtap && e.target = = = Element) {Dtaptimer = SetTimeout (function () {Firsttou                  Chend = true;                  LASTTX = Lastty = null;              Console.log (' Fire double Tap event ');          }, 400);      }} else{Firsttouchend = true;  }}, True); The speed of a finger on IOS is too fast to be triggered when you tap the screen multiple timesClick event Element.addeventlistener (' click ', Function (e) {if (Dtaptimer) {cleartimeout (Dtaptimer);    Dtaptimer = null;  Firsttouchend = true;  }}, False);    }

The Longtap event Longtap event is an event that is triggered when the finger is held down for a long time while holding the screen.

var starttx, Startty, Ltaptimer;    Element.addeventlistener (' Touchstart ', function (e) {if (Ltaptimer) {cleartimeout (Ltaptimer);  Ltaptimer = null;    } var touches = e.touches[0];  STARTTX = Touches.clientx;    Startty = Touches.clienty;  Ltaptimer = SetTimeout (function () {Console.log (' Fire long Tap event ');    }, 1000);  E.preventdefault ();}, False); Element.addeventlistener (' Touchmove ', function (e) {var touches = e.touches[0], ENDTX = touches.clientx, endty =    Touches.clienty; if (Ltaptimer && (Math.Abs (ENDTX-STARTTX) > 5 | |    Math.Abs (Endty-startty) > 5) {cleartimeout (Ltaptimer);  Ltaptimer = null;  }}, False);    Element.addeventlistener (' Touchend ', function (e) {if (Ltaptimer) {cleartimeout (Ltaptimer);  Ltaptimer = null; }}, False);

The swipe event swipe event is an event that is triggered when the finger is sliding on the screen and is divided into swipeleft (left), swiperight (right), swipeup (UP), and swipedown (down) depending on the direction of the finger swipe.

var istouchmove, Starttx, Startty;    Element.addeventlistener (' Touchstart ', function (e) {var touches = e.touches[0];  STARTTX = Touches.clientx;  Startty = Touches.clienty;  Istouchmove = false;}, false);  Element.addeventlistener (' Touchmove ', function (e) {istouchmove = true;  E.preventdefault ();}, False);  Element.addeventlistener (' Touchend ', function (e) {if (!istouchmove) {return; } var touches = E.changedtouches[0], ENDTX = touches.clientx, endty = touches.clienty, Distancex = starttx-e    NDTX Distancey = startty-endty, isswipe = false;  if (Math.Abs (Distancex) >= Math.Abs (Distancey)) {if (Distancex >) {console.log (' Fire swipe left event '      );    Isswipe = true;          } else if (Distancex < -20) {Console.log (' Fire swipe right event ');    Isswipe = true;              }} else{if (Distancey >) {console.log (' Fire swipe up event ');    Isswipe = true; } else if (Distancey <-20) {     Console.log (' Fire swipe down event ');    Isswipe = true;  }} if (Isswipe) {console.log (' Fire swipe event ');    }}, False);

Complete the package:

Https://github.com/chenmnkken/monoevent/wiki/MonoEvent-%E7%9A%84%E4%BD%BF%E7%94%A8%E6%96%87%E6%A1%A3

http://levi.cg.am/archives/3546

Mobile-side events common functions to organize backups