JS realizes touch moving touching screen sliding event __js

Mobile End touch screen sliding effect is actually picture carousel, on the PC page is very good to implement, binding click and MouseOver events to complete. But on the mobile device, to achieve this kind of carousel effect, need to use the core touch event. Handling Touch events can track every finger that slides on the screen.

Here are four kinds of touch events
Touchstart://trigger when the finger is placed on the screen
touchmove://fingers on the screen sliding trigger
touchend://trigger when the finger leaves the screen
touchcancel://The system cancels the touch event when the trigger, this seems to be less use

After each touch event is triggered, an event object is generated, and the event object includes the following three touch lists

Touches://List of all fingers on the current screen
Targettouches:// The list of fingers on the current DOM element , try to use this instead touches
Changedtouches:// List of fingers that involve the current event , try to use this instead touches
Each touch in these lists is made up of touch objects that contain touching information, and the main properties are as follows:
Clientx/clienty://Touch point relative to the position of the browser window
Pagex/pagey://The position of the touch point relative to the page
Screenx/screeny://The position of the touch point relative to the screen
Identifier: ID of//touch Object
Target://Current DOM element

Attention:

When the finger slides across the screen, it affects the behavior of the browser, such as scrolling and zooming. So when calling a touch event, be aware that scaling and scrolling are prohibited.

1. No scaling
Set through META tags.

<meta name= "viewport" content= "Target-densitydpi=320,width=640,user-scalable=no" >

2. No scrolling
Preventdefault is to block the default behavior, andthe default behavior of touch events is scrolling .
Event.preventdefault ();

Example:

$ (' body '). On ("Touchstart", function (e) {
e.preventdefault ();
StartX = E.originalevent.changedtouches[0].pagex,
starty = E.originalevent.changedtouches[0].pagey;
});
$ (' body '). On ("Touchmove", function (e) {
e.preventdefault ();
Moveendx = E.originalevent.changedtouches[0].pagex,
moveendy = E.originalevent.changedtouches[0].pagey,
X　　　　= Moveendx-startx,
Y = Moveendy-starty;

if (Math.Abs (X) > Math.Abs (Y) && X > 0) {
alert ("Left 2 Right");
Else if (Math.Abs (X) > Math.Abs (Y) && X < 0) {
alert ("Right 2 Left");
Else if (Math.Abs (Y) > Math.Abs (X) && Y > 0) {
alert ("Top 2 Bottom");
Else if (Math.Abs (Y) > Math.Abs (X) && Y < 0) {
alert ("Bottom 2 Top");
else{
alert ("Just Touch");
}
);

Document.addeventlistener (' Touchstart ', function (e) {e.preventdefault ();},false);
 Document.addeventlistener (' Touchmove ', function (e) {  e.preventdefault ();},false);
 Document.addeventlistener (' Touchend ', function (e) {e.preventdefault ();},false);
 
 
Document.addeventlistener (' Touchstart ', function () {},false);
Document.removeeventlistener (' Touchmove ', this,false);
Document.removeeventlistener (' Touchend ', this,false);