Javascript Touch Event _ javascript skills

In this article, we will thoroughly study the touch event APIs provided by iOS and Android devices, explore which types of applications can be built, provide some best practices, and discuss some touch-enabledapplications) development has become easier and more useful technology. Js touch events are generally used for mobile touch screen sliding.

The Code is as follows:

$ (Function () {document. addEventListener ("touchmove", _ touch, false) ;}) function _ touch (event) {alert (1 );}

Touchstart: triggered when the finger touches the screen, even if one finger is already on the screen.
Touchmove: triggered continuously when the finger slides on the screen. When this event occurs, call preventDefault () to prevent scrolling.
Touchend: triggered when the finger is removed from the screen.
Touchcancel: triggered when the system stops tracking touch. The exact trigger event of this event is not explicitly described in the document.

The above event objects all have the following attributes:

Touches: an array of Touch objects for the currently tracked Touch operation.
TargetTouches: an array of Touch objects specific to the event target.
ChangeTouches: indicates the array of Touch objects that have changed since the last Touch.

Each Touch object contains the following attributes:

ClientX: Touch the X coordinate of the target in the viewport.
ClientY: Touch the Y coordinate of the target in the viewport.
Identifier: the unique ID of the touch.
PageX: Touch the x coordinate of the target in the page.
PageY: Touch the y coordinate of the target in the page.
ScreenX: Touch the x coordinate of the target in the screen.
ScreenY: Touch the y coordinate of the target in the screen.
Target: DOM node coordinates of the touch

Touch event

Three basic touch events listed in the specification that are widely implemented across mobile devices:
1. touchstart: Place your finger on a DOM element.
2. touchmove: drag a DOM element with your finger.
3. touchend: removes the finger from a DOM element.

Each touch event contains three touch lists:
1. touches: a list of all the fingers currently on the screen.
2. targetTouches: A list of fingers located on the current DOM element.
3. changedTouches: A list of fingers involved in the current event

For example, in a touchend event, the finger is removed.

These lists consist of objects that contain Touch Information:
1. identifier: a numerical value that uniquely identifies the current finger in a touch session.
2. target: DOM element, which is the target of an action.
3. Customer/page/screen coordinates: position where an action occurs on the screen.
4. radius coordinates and rotationAngle: draw an elliptical shape that is about the shape of your fingers.

Touch-able applications

Touchstart, touchmove, and touchend events provide a rich set of functions to support almost any type of touch-based interaction-including common multi-touch gestures, for example, pinch and zoom, rotation wait. The following code allows you to drag a DOM element around with a single-finger touch:

Var obj = document. getelementbyidx_x_x_x_x_x ('id'); obj. addEventListener ('touchmove ', function (event) {// if this element has only one finger, if (event.tar getTouches. length = 1) {var touch = event.tar getTouches [0]; // place the element in the position of the finger obj. style. left = touch. pageX + 'px '; obj. style. top = touch. pageY + 'px '; }}, false );

The following is an example. This example shows all the contacts on the screen. It is used to feel the responsiveness of the device.

// Set the canvas and use the ctx variable to expose the context canvas. addEventListener ('touchmove ', function (event) {for (var I = 0; I <event. touches. length; I ++) {var touch = event. touches; ctx. beginPath (); ctx. arc (touch. pageX, touch. pageY, 20, 0, 2 * Math. PI, true); ctx. fill (); ctx. stroke () ;}}, false );

Demo

There are many interesting multi-touch demos everywhere, such as this canvas-based painting demonstration by Paul Irish and others.

Browser Ninja, a technical demonstration, is a Fruit Ninja clone that uses CSS 3 conversion, transition, and canvas.

Best practices

Disable Scaling

The default multi-touch setting is not particularly useful, because your slide and gesture are often associated with browser behavior, such as scrolling and scaling.

To disable the scaling function, use the following meta tag to set your view area (viewport), so that it is not scalable for users:
Content = "width = device-width, initial-scale = 1.0, user-scalable = no">
Read this article on mobile HTML 5 to learn more