Phone Touch Events

Touchstart: Trigger when Touch is started

Touchmove: Triggers when the finger slides on the screen

Touchend: Trigger at end of touch

Each touch event includes three touch lists, each containing a series of touch points (for multi-Touch):

Touches: A list of all the fingers that are currently on the screen.

Targettouches: The list of fingers that are located on the current DOM element.

Changedtouches: A list that involves the finger of the current event.

Each touch point consists of the following touch information (commonly used):

Identifier: A numeric value that uniquely identifies the current finger in a touch session. Usually starting from 0 serial number (ANDROID4.1,UC)

The Target:dom element is the target of the action.

Pagex/pagex/clientx/clienty/screenx/screeny: A numeric value where the action occurs on the screen (page contains scrolling distance, the client does not contain scrolling distance, and screen is based on screens).

Radiusx/radiusy/rotationangle: Draws approximately the shape of a finger oval, respectively, two radius and rotation angle of the ellipse. Initial test browser does not support, fortunately the function is not commonly used, welcome feedback.

//touchstart Events function Touchsatrtfunc (e) {//evt.preventdefault ();//block browser zoom, scroll bar scrolling, etc. when blocking touchvar touch = e.touches[0];//Get First Contactvar x = number (Touch.pagex);//page contact X coordinatevar y = number (touch.pagey);//page Contact y-coordinate //Record contact initial positionStartX = x; starty = y; }  //touchmove Events function Touchmovefunc (e) {//evt.preventdefault ();//block browser zoom, scroll bar scrolling, etc. when blocking touch var touch = evt.touches[0];//Get First Contactvar x = number (Touch.pagex);//page contact X coordinatevar y = number (touch.pagey);//page Contact y-coordinatevar text = ' Touchmove Event Trigger: (' + x + ', ' + y + ') ';  //Judging the sliding directionif (x-startx! = 0) {//Swipe left /right    }  if (y-starty! = 0) {//swipe up/down    }  }  

var obj = document.getElementByIdx_x_x( ‘id‘ ); obj.addEventListener( ‘touchmove‘ ,  function (event) {       // 如果这个元素的位置内只有一个手指的话      if (event.targetTouches.length == 1) { 　　　　 event.preventDefault(); // 阻止浏览器默认事件，重要           var touch = event.targetTouches[0];          // 把元素放在手指所在的位置          obj.style.left = touch.pageX-50 +  ‘px‘ ;          obj.style.top = touch.pageY-50 +  ‘px‘ ;          } },  false );