Encapsulation examples of touch events in JavaScript mobile device web development _javascript Tips

On touch-screen devices, some of the more basic gestures need to be encapsulated two times to achieve the touching event.
Zepto is a class library with a higher usage rate on the mobile end, but some of the events that the Touch module simulates have some compatibility issues, such as the tap event's bug on some Android devices, and other types of events are more or less compatible.

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

Tap incident

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 latency, and if you want a quick response to the "click" Event, you need to use touch events to achieve it.

Copy Code code 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 more sensitive on some devices, resulting in a slight change in the event coordinates when you press and release your fingers.
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 the finger hits the screen two times in the same position and within a very short time. In some browsers, the Doubletap event selects text, and if you do not want to select text, you can add User-select:none CSS properties to the element.

Copy Code code 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 trigger a single tap event.
if (Math.Abs (STARTTX-ENDTX) < 6 && Math.Abs (STARTTX-ENDTX) < 6) {
Two tap intervals to ensure within 500 milliseconds
if (Duration < 301) {
This tap position and the last tap position allow for a certain range of errors
if (Lasttx!== null &&
Math.Abs (LASTTX-ENDTX) < &&
Math.Abs (Lastty-endty) < 45) {

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);

In the IOS Safari, the finger tapping on the screen is too fast,
There is a certain probability that it will not respond to the Touchstart and Touchend events for the second time
And the long touch of the fingers 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 speed at which the finger hits the screen too quickly on IOS does not trigger the Click event
Element.addeventlistener (' click ', Function (e) {
if (Dtaptimer) {
Cleartimeout (Dtaptimer);
Dtaptimer = null;
Firsttouchend = true;
}
}, False);

}

LONGTAP Events

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

Copy Code code 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 the event that triggers when the finger slides on the screen and is divided into swipeleft (left), swiperight (right), swipeup (UP), swipedown (downward) according to the direction of the finger sliding.

Copy Code code 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 events that are modeled above are encapsulated in monoevent. Full code Address: https://github.com/chenmnkken/monoevent, need a friend to see it ~

PS: Here again for you to recommend a JS event on the online query tool, summed up JS commonly used event types and function functions:

JavaScript event and Feature description encyclopedia:

Http://tools.jb51.net/table/javascript_event