In this article, I will delve into the touch event API provided by ios and android devices, and explore what types of applications can be built.Give some best practices,It also discusses some useful technologies that make the development of touch-enabled applications easier.

js touch event, generally used for mobile terminal touch screen sliding

$(function () {document.addeventlistener ("touchmove", _touch, false);}) function _touch (event) {alert (1);}

touchstart:triggered when a finger touches the screen;Fires even when a finger is already on the screen.

touchmove:Triggered continuously when a finger is swiped across the screen.During this event,Calling preventdefault () prevents scrolling.

touchend:Fired when a finger is removed from the screen.

touchcancel:Fired when the system stops tracking touches.Regarding the exact triggering of this event,It is not explicitly stated in the documentation.

The following properties exist on the event object of the above events:

touches:An array of touch objects representing touch operations currently tracked.

targettouches:An array of touch objects specific to the event target.

changetouches:An array of touch objects representing what has changed since the last touch.

Each touch object contains the following properties:

clientx:The x coordinate of the touch target in the viewport.

clienty:The y coordinate of the touch target in the viewport.

identifier:The unique id of the touch.

pagex:The x coordinate of the touch target in the page.

pagey:The y coordinate of the touch target in the page.

screenx:The x coordinate of the touch target on the screen.

screeny:The y coordinate of the touch target on the screen.

target:coordinates of the touched dom node

Touch event

Three basic touch events that are listed in the specification and are widely implemented across mobile devices:

1. touchstart:put your finger on a dom element.

Touchmove:drag a dom element with your finger.

3. touchend:remove your finger from a dom element.

Each touch event includes three touch lists:

1. touches:a list of all 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, this would be the finger removed.

These lists consist of objects that contain touch information:

1. identifier:a value,Uniquely identifies the current finger in a touch session.

2. target:The dom element is the target to which the action is directed.

3. Client/Page/Screen Coordinate:Where the action occurred on the screen.

4. Radius coordinates and rotationangle:Draw an ellipse roughly equivalent to the shape of a finger.

Touchable 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,For example, pinch to zoom, rotate and wait. The following piece of code lets you drag a dom element around with one-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
   obj.style.left=touch.pagex + "px";
     obj.style.top=touch.pagey + "px";
}, false);

Here is an example,This example shows all the contacts currently on the screen,Its role is to feel the responsiveness of the device.

  //Set the canvas and expose the context through 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, 20, 0, 2 * math.pi, true);
    ctx.fill ();
    ctx.stroke ();
  }, false);


There are many interesting multi-touch demos everywhere,Take for example this canvas-based painting demo implemented by paul irish and others.

And browser ninja, a technology demo,Is a fruit ninja clone using css3 transforms, transitions, and canvas.

Best practice

Prevent zoom

The default multi-touch settings are not particularly easy to use,Because your swipes and gestures are often related to browser behavior,For example scroll and zoom.

To disable the zoom function,Use the following meta tag to set your viewport so that it is not scalable to the user:

content="width=device-width, initial-scale=1.0, user-scalable=no">

Check out this article about mobile html 5 to learn more about the view area settings.

Stop scrolling

Some mobile devices have default touchmove behavior, such as the classic ios overscroll effect, which triggers a view bounce when the scrolling exceeds the limits of the content.This approach can cause confusion in many multi-touch applications,But it is easy to disable it.

  document.body.addeventlistener ("touchmove", function (event) {
    event.preventdefault ();
   }, false);

Careful rendering

If you are writing a multi-touch application involving complex multi-finger gestures,Think carefully about how to respond to touch events,Because you have to deal with so many things at once.Consider the example of drawing all the contacts on the screen in the previous section,You can draw immediately when there is touch input:

 canvas.addeventlistener ("touchmove", function (event) {
   rendertouches (event.touches);

However, this technology is not intended to expand with the number of fingers on the screen.As an alternative,Can track all fingers,And then render in a loop,This results in better performance:

 var touches=[]
  canvas.addeventlistener ("touchmove", function (event) {
  }, false);
  //Set a timer at 60 frames per second
  timer=setinterval (function () {
   rendertouches (touches);
  }, 15);

Tip:setinterval is not very suitable for animation,Because it doesn't take into account the browser's own rendering loop.Modern desktop browsers provide the function requestanimationframe,Based on performance and battery operating time,This is a better choice.Once the browser provides support for this function,That would be the preferred way of doing things.

Using targettouches and changedtouches

One thing to keep in mind is thatevent.touches is an array of all fingers touching the screen,And 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.

the last point,Because you are developing for mobile devices,So you should be aware of mobile best practices,These are discussed in eric bidelman's article,And to understand this w3c document.

Device support

Regrettably,The implementation of touch events varies greatly in terms of completeness and quality.I wrote a diagnostic script to show some basic information about the touch api implementation,Which events are supported,As well as solutions triggered by touchmove events.I tested android 2.3.3 on nexus one and nexus s hardware, tested android 3.0.1 on xoom, and tested ios 4.2 on ipad and iphone.

in short,All tested browsers support touchstart, touchend, and touchmove events.

The spec provides three additional touch events,But the browsers tested did not support them:

1. touchenter:a moving finger enters a dom element.

2. toucheleave:move your finger to leave a dom element.

3. touchcancel:Touch was interrupted (implementation specification).

The tested browser also provided a list of touches, targettouches, and changedtouches inside each touch list. However, the browsers tested did not support the radiusx, radiusy, or rotationangle properties, which indicate the shape of the finger touching the screen.During a touchmove, the event is triggered 60 times a second, which is the case for all tested devices.

  • Previous IIS75 pseudo-static script mapping configuration method (detailed graphic)
  • Next Analysis of MD5 Encryption Usage in Java Web Development