JavaScript's Touch Event

JS Touch event, typically used for touch screen swipe on the mobile side

$ (functionfalsefunction _touch (event) {alert (1);}

Touchstart: Triggered when the finger touches the screen, even if a finger has been placed on the screen. Touchmove: A continuous trigger when the finger is sliding on the screen. During this event, calling Preventdefault () can prevent scrolling. Touchend: Triggered when the finger moves away from the screen. Touchcancel: Triggered when the system stops tracking touch. The exact trigger event for this event is not explicitly stated in the documentation.

The event object above has the following properties:

Touches: Represents an array of touch objects that are currently tracked by touching operations. Targettouches: An array of touch objects that are specific to the event target. Changetouches: An array of touch objects that represent what has changed since the last touch.

Each Touch object contains the following properties:

ClientX: Touch the x-coordinate of the target in the viewport. ClientY: Touch the y-coordinate of the target in the viewport. Identifier: Represents 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: The DOM node coordinates of the touch

Touch events

There are three basic touch events that are listed in the specification and have been 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: Move the finger away from a DOM element.

Each touch event includes three touch lists:
1. Touches: A list of all the fingers that are currently on the screen.
2. Targettouches: A list of the fingers that are located on the current DOM element.
3. Changedtouches: A list of fingers that involve the current event

For example, in a Touchend event, this would be a moving finger.

These lists consist of objects that contain touch information:
1. Identifier: A numeric value that uniquely identifies the current finger in a touch session.
2. The Target:dom element is the target of the action.
3. Client/page/screen coordinates: The position where the action takes place on the screen.
4. Radius coordinates and RotationAngle: Draw an ellipse roughly equivalent to the shape of a finger.

Touch-controlled applications

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

var obj = document.getelementbyidx_x_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.targetTouches.length = = 1)  {  var touch = event.targettouches[0];   Place the element where the finger is located   obj.style.left = Touch.pagex + ' px ';     Obj.style.top = touch.pagey + ' px ';  }}, False);

Here is an example that shows all the current contacts on the screen, and it is used to feel the responsiveness of the device.

Set the canvas and expose the context copy code via the CTX variable 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, 0, 2*math.pi, true);    Ctx.fill ();    Ctx.stroke ();   }  }, False);

Demonstrate

There are lots of interesting multi-touch demos everywhere, such as the canvas-based painting demos that Paul Irish and others have implemented.

and browser Ninja, a technical demonstration, is a fruit Ninja clone that uses CSS3 transformations, transitions, and canvases.

Best practices

Block scaling

The default Multitouch settings are not particularly useful because your swipe and gestures are often associated with the behavior of your browser, such as scrolling and zooming.

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

Prevent scrolling

Some mobile devices have default Touchmove behavior, such as the classic iOS Overscroll effect, which causes a view bounce when scrolling beyond the bounds of the content. This can be confusing in many multitouch applications, but it's easy to disable it.

function (event) {    event.preventdefault ();    false

Careful rendering

If you're writing a multi-touch app that involves complex multi-fingered gestures, be careful about how you respond to touch events because you're dealing with so many things at once. Consider the example of drawing all the contacts on the screen in the previous section, which you can draw as soon as you have touch input:

function (event) {   rendertouches (event.touches);  },

However, this technique does not have to be expanded with the number of fingers on the screen, instead, you can keep track of all your fingers and then render them in a loop to get better performance:

var touches = []  canvas.addeventlistener (function(event) {    =  event.touches;   false );   // set a timer  of 60 frames per second Timer = setinterval (function() {   rendertouches (touches);   15);

Tip: SetInterval is not suitable for animations because it does not take into account the browser's own rendering cycle. Modern desktop browsers offer the Requestanimationframe function, which is a better choice based on performance and battery working time reasons. Once the browser provides support for the function, it will be the preferred way to handle things.

Using Targettouches and Changedtouches
One thing to keep in mind is that event.touches is an array of all the fingers that touch the screen, not just those located on the target DOM element. You may find it more useful to use event.targettouches and event.changedtouches instead of event.touches.

Finally, since you are developing for mobile devices, you should be mindful of the best practices for mobile, which are addressed in Eric Bidelman's articles, as well as understanding this document.

Device Support

Unfortunately, the implementation of touch events varies greatly in terms of completeness and quality. I have written a diagnostic script to show some basic information about the touch API implementation, including which events are supported, and the Touchmove event-triggered solution. I tested Android2.3.3 on the Nexus One and Nexus S hardware, tested the Android 3.0.1 on the Xoom, and tested iOS 4.2 on the ipad and iphone.

In short, all tested browsers support Touchstart, Touchend, and Touchmove events.

The specification provides an additional three touch events, but the browser being tested does not support them:
1. Touchenter: Move the finger into a DOM element.
2. Toucheleave: Move your finger away from a DOM element.
3. Touchcancel: Touch interrupted (Implementation specification).

The tested browser also provides a list of touches, targettouches, and changedtouches within each touch list. However, the browser being tested does not support RADIUSX, RadiusY, or RotationAngle properties, which indicate the shape of the finger touching the screen. During a touchmove, the event is triggered about 60 times a second, as is the case with all the tested devices.

JavaScript's Touch Event