HTML5 Mobile Contact Screen Touch Event Introduction _ Experience Exchange

HTML5 added a lot of events, but because their compatibility problem is not very ideal, the application is not too strong, so basically omitted here, we only share the application of a wide range of compatible with good events, in future, with the compatibility of the upgrade after the increase will continue to add shares.

Today's events are mainly about touch events:

Touchstart: Trigger when the touch starts
Touchmove: Trigger when the finger slides on the screen
Touchend: Trigger When the touch is over

Each touch event includes three touch lists, each containing a corresponding set of touch points (used to achieve 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 is comprised of the following touch information (commonly used):

Identifier: A numeric value that uniquely identifies the current finger in the touch session. Normally starting from 0 serial number (ANDROID4.1,UC)
The Target:dom element is the target to which the action is directed.
Pagex/pagex/clientx/clienty/screenx/screeny: A numeric value, where the action takes place on the screen (page contains the scrolling distance, the client does not contain a scrolling distance, and screen is the base).
Radiusx/radiusy/rotationangle: An ellipse of approximately the shape of a finger, two radii and angles of rotation, respectively. Initial test browser does not support, fortunately, the function is not commonly used, welcome feedback.

Copy Code code as follows:

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

The above is HTML5 mobile phone touch screen all the contents of the event, I hope to give you a reference, but also hope that we support the cloud habitat community.