Mobile End JS Touch Event Basics

A touch event on the phone

Basic events:

Touchstart//The finger just touches the screen when it triggers
Touchmove//trigger when the finger moves on the screen
Touchend//trigger when the finger moves away from the screen

Here's a little bit less:
Touchcancel//Touch process is triggered when the system cancels

Each event has the following list, such as Touchend's targettouches of course is 0:

Touches//List of all fingers located on the screen
Targettouches//List of all fingers located on the element
Changedtouches//List of all fingers that involve the current event

Each event has a list, and each list has the following properties:


Where coordinates commonly used Pagex,pagey:
Pagex//relative to the X coordinate of the page
Pagey//Relative to the Y-coordinate of the page
ClientX//X coordinates relative to viewport
ClientY//Relative to the viewport's Y-coordinate
ScreenX//relative to the screen X coordinate
ScreenY//Relative to the screen's Y-coordinate

Identifier//Unique number of the current touch point
Target//The DOM element that the finger touches



Other related events:

Event.preventdefault ()//block browser zoom, scroll bar scrolling when touching
var Supporttouch = "Createtouch" in document//To determine whether to support touch events

More in-depth content? Click: http://www.cesclub.com/bw/jishuzhongxin/Webjishu/2011/1216/18069.html



Second, the example

The following is to obtain the different types of sliding code specific practices, combined with the ideas of predecessors, encapsulated well, you can learn from:


var touchfunc = function (Obj,type,func) {
Sliding range within 5x5 is done click Processing, S is start, E is end
var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
var stime = 0, etime = 0;
Type = Type.tolowercase ();

Obj.addeventlistener ("Touchstart", function () {
stime = new Date (). GetTime ();
INIT.SX = Event.targettouches[0].pagex;
Init.sy = Event.targettouches[0].pagey;
Init.ex = INIT.SX;
Init.ey = Init.sy;
if (Type.indexof ("Start")!=-1) func ();
}, False);

Obj.addeventlistener ("Touchmove", function () {
Event.preventdefault ();//Prevent browser zooming, scroll bar scrolling when touching
Init.ex = Event.targettouches[0].pagex;
Init.ey = Event.targettouches[0].pagey;
if (Type.indexof ("move")!=-1) func ();
}, False);

Obj.addeventlistener ("Touchend", function () {
var changex = Init.sx-init.ex;
var changey = Init.sy-init.ey;
if (Math.Abs (Changex) >math.abs (changey) &&math.abs (changey) >init.y) {
Left and right events
if (Changex > 0) {
if (Type.indexof ("left")!=-1) func ();
}else{
if (Type.indexof ("right")!=-1) func ();
}
}
else if (Math.Abs (changey) >math.abs (Changex) &&math.abs (Changex) >init.x) {
Up and down events
if (Changey > 0) {
if (Type.indexof ("top")!=-1) func ();
}else{
if (Type.indexof ("Down")!=-1) func ();
}
}
else if (Math.Abs (Changex) <init.x && math.abs (changey) <init.y) {
ETime = new Date (). GetTime ();
Click on the event, which is broken down according to the time difference
if ((Etime-stime) > 300) {
if (Type.indexof ("Long")!=-1) func (); Long Press
}
else {
if (Type.indexof ("click")!=-1) func (); When the click Handles
}
}
if (Type.indexof ("End")!=-1) func ();
}, False);
};