Use javascript touch event touch, javascripttouch

Use javascript touch event touch, javascripttouch

 

For details, click

 

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. Three basic touch events that are listed in the specification and 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 containing 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 such as touchstart, touchmove, and touchend events provide a rich set of functions to support almost any type of touch-based interaction-including common multi-point 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 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 the contacts on the screen, which are 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); 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. It is best to prevent the default multi-point touch setting from being scaled, because your slides and gestures are often associated with browser behavior, such as scrolling and scaling. To disable the zoom function, use the following meta tag to set your view area (viewport), which 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