Phone-side HTML5 Touch Event (Touch events) "Go"

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 located on the current DOM element.

changedtouches: a list of fingers that involve 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 the touch session. usually starting from 0 serial number (ANDROID4.1,UC)

Target: The DOM element, which is the target of the action.

pagex/pagex/clientx/clienty/screenx/screeny: A numeric value where the action takes place on the screen (page contains scrolling distance, client does not contain scrolling distance,　Screens are based on the screen).

Radiusx/radiusy/rotationangle: draw an ellipse roughly equivalent to the shape of a finger, two radii and rotation angles of the ellipse, respectively. initial test Browser does not support, fortunately the function is not commonly used, welcome feedback.

1  varobj = document.getelementbyidx_x ('ID');2Obj.addeventlistener ('Touchmove', Function (Event) {3      //If there's only one finger in the position of this element ,4     if(Event. Targettouches.length = =1) {5  　　　　  Event. Preventdefault ();//Block Browser default events, important6         varTouch =Event. targettouches[0];7         //Place the element where the finger is located8Obj.style.left = touch.pagex- -+'px';9Obj.style.top = touch.pagey- -+'px';Ten         } One},false);

Note: This feature can only be viewed on mobile devices or emulated mobile devices

Originally from: http://blog.sina.com.cn/s/blog_51048da70101f0ex.html

Phone-side HTML5 Touch Event (Touch events) "Go"