Mobile html touch events and htmltouch events

Mobile html touch events and htmltouch events

Mobile devices such as smartphones and tablets usually have capacitive touch-sensitivescreen to capture the interaction between users' fingers. With the development of mobile networks, it can support more and more complex applications. web developers need a way to handle these events. For example, almost all fast-paced games require a player to press multiple buttons at a time, which means multi-touch in the case of a touch screen.

Apple introduced the touch event API in iOS 2.0. Android is catching up with this fact standard and narrowing the gap. A recent W3C Working Group is working together to develop this touch event specification.

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, and provide some best practices, some useful technologies that make the development of touch-enabled applications easier are also discussed.

 

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: copy the code

Var obj = document. getelementbyidx_x_x_x_x_x ('id ');

Obj. addEventListener ('touchmove ', function (event)

{// If there is only one finger in the position of this element

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 copy code

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