Html5 touch events (touch events) and html5touch events on mobile phones

Html5 touch screen events (touch events) on mobile phones [Switch], html5touch

Touchstart:Triggered when the touch starts

Touchmove:Triggered when the finger slides on the screen

Touchend:Triggered when the touch ends

Each touch event contains three touch lists, each containing a series of corresponding touch points (used for multi-touch ):

Touches:List of all fingers currently on the screen.

TargetTouches:The list of fingers on the current DOM element.

ChangedTouches:List of finger involved in the current event.

Each touch point contains the following Touch Information (commonly used ):

Identifier:A value that uniquely identifies the current finger in a touch session. Generally, it is the serial number starting from 0 (android4.1, uc)

Target:A dom element is the target of an action.

PageX/clientX/clientY/screenX/screenY:A value that specifies the position where an action occurs on the screen (page contains the scroll distance, client does not contain the scroll distance, and screen is based on the screen ).

RadiusX/radiusY/rotationAngle:Draw an elliptical shape that is about the same as the shape of the finger, which is the radius and Rotation Angle of the elliptical shape. The preliminary test is not supported by the browser. Fortunately, the function is not commonly used. You are welcome to give your feedback.

 

1 var obj = document. getElementByIdx_x ('id'); 2 obj. addEventListener ('touchmove ', function (event) {3 // if there is only one finger in the position of this element, 4 if (event.tar getTouches. length = 1) {5 event. preventDefault (); // block the default events of the browser. Important 6: var touch = event.tar getTouches [0]; 7 // place the element in the position of the finger 8 obj. style. left = touch. pageX-50 + 'px '; 9 obj. style. top = touch. pageY-50 + 'px '; 10} 11}, false );

 

Note: This function can only be viewed on mobile devices or simulated mobile devices.

From: http://blog.sina.com.cn/s/blog_51048da70101f0ex.html