Mobile-Touch Events

Source: http://blog.sina.com.cn/s/blog_51048da70101f0ex.html Copyright belongs to the original author

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)

Target: The DOM element, which 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.

var obj = document.getelementbyidx_x (' id '); Obj.addeventlistener (' Touchmove ', function (event) {     // If there is only one finger in the position of this element, if    (event.targetTouches.length = = 1) {event.preventdefault ();//block browser default event, important         var touch = E Vent.targettouches[0];        Place the element where the finger is located        obj.style.left = touch.pagex-50 + ' px ';        Obj.style.top = touch.pagey-50 + ' px ';        }}, False);

　　

Mobile-Touch Events