Packaged instances of touch events in JavaScript mobile device web development

On touch-screen devices, some of the more basic gestures require a two-time package of touch events to implement.
Zepto is a class library with a higher usage rate on the mobile side, but there are some compatibility issues with some of the events that the touch module simulates, such as the presence of event-penetrating bugs on some Android devices in the Tap event, and more or less compatibility issues with other types of events.

As a result, it's up to you to encapsulate these commonly used gesture events, because there are not too many real devices to test, there may be some compatibility issues, and the following code is only tested in some of the more common browsers on IOS 7, Andorid 4.

Tap Event

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

Copy CodeThe code is as follows:
var starttx, Startty;

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.changedtouches[0],
ENDTX = Touches.clientx,
Endty = Touches.clienty;

Touch events are sensitive on some devices, causing a slight change in event coordinates when you press and release your finger
if (Math.Abs (STARTTX-ENDTX) < 6 && Math.Abs (STARTTY-ENDTY) < 6) {
Console.log (' Fire tap event ');
}
}, False);

DOUBLETAP Events

The Doubletap event is an event that is triggered when a 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.

Copy CodeThe code is as follows:
var istouchend = False,
Lasttime = 0,
LASTTX = NULL,
Lastty = NULL,
Firsttouchend = True,
BODY = Document.body,
Dtaptimer, 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,
Endty = Touches.clienty,
now = Date.now (),
Duration = Now-lasttime;

 //First make sure you can trigger a single tap event
  if (Math.Abs (STARTTX-ENDTX) < 6 && Math.Abs (STARTTX-ENDTX) < 6 {
   //Two tap intervals are guaranteed within 500 milliseconds
    if (Duration < 301) {
&NBSP;&NBSP;&NBSP;&N bsp; //The tap position and the last tap position allow a range of errors
      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);

Finger tapping on the screen is too fast on IOS Safari,
A certain probability will cause the second time to not respond to Touchstart and Touchend events
The touch of a finger for a long time does not trigger the click

if (~navigator.useragent.tolowercase (). indexOf (' iphone OS ')} {

Body.addeventlistener (' Touchstart ', function (e) {
StartTime = Date.now ();
}, True);

Body.addeventlistener (' Touchend ', function (e) {
var Nolongtap = Date.now ()-StartTime < 501;

if (firsttouchend) {
Firsttouchend = false;
if (nolongtap && e.target = = = = Element) {
Dtaptimer = SetTimeout (function () {
Firsttouchend = true;
LASTTX = Lastty = null;
Console.log (' Fire double Tap event ');
}, 400);
}
}
else{
Firsttouchend = true;
}
}, True);

The Click event is not triggered when your finger beats the screen multiple times on IOS
Element.addeventlistener (' click ', Function (e) {
if (Dtaptimer) {
Cleartimeout (Dtaptimer);
Dtaptimer = null;
Firsttouchend = true;
}
}, False);

}

LONGTAP Events

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

Copy CodeThe code is as follows:
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);

Swipe events

The 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.

Copy CodeThe code is as follows:
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-ENDTX
Distancey = Startty-endty,
Isswipe = false;

if (Math.Abs (Distancex) >= Math.Abs (Distancey)) {
if (Distancex > 20) {
Console.log (' Fire swipe left event ');
Isswipe = true;
}
else if (Distancex <-20) {
Console.log (' Fire swipe right event ');
Isswipe = true;
}
}
else{
if (Distancey > 20) {
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);

The above simulated events are encapsulated in the monoevent. Full code Address: https://github.com/chenmnkken/monoevent, need a friend to see it ~

Packaged instances of touch events in JavaScript mobile device web development