On the touch event _javascript skills of JavaScript

JS touch events, generally used to move the end of the touchscreen slide

Copy Code code as follows:

$ (function () {Document.addeventlistener ("Touchmove", _touch, False);}) function _touch (event) {alert (1);}

Touchstart: Triggers when the finger touches the screen, even if a finger is already on the screen.
Touchmove: A continuous trigger when the finger slides on the screen. During this event, calling Preventdefault () prevents scrolling.
Touchend: Triggers when the finger moves away from the screen.
Touchcancel: Triggered when the system stops tracking the touch. The exact triggering event for this event is not specified in the document.

The following properties are present on the event object for the above events:

Touches: An array of touchscreen objects that represent the touch operations of the current trace.
Targettouches: An array of touch objects that are specific to the event target.
Changetouches: An array of touch objects that indicate what has changed since the last time it was touched.

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: A unique ID that represents a touch.
Pagex: The x-coordinate of the touch target on the page.
Pagey: The y-coordinate of the touch target on the page.
ScreenX: The x-coordinate of the touch target in the screen.
ScreenY: The y-coordinate of the touch target in the screen.
Target: DOM node coordinates of the touch

Touch events

Three basic touch events that are listed in the specification and have been widely implemented across mobile devices:
1. Touchstart: Put the finger on a DOM element.
2. Touchmove: Fingers drag a DOM element.
3. Touchend: The fingers are moved away from a DOM element.

Each touch event consists of three touch lists:
1. Touches: A list of all the fingers currently located on the screen.
2. Targettouches: A list of the fingers located on the current DOM element.
3. Changedtouches: A list of the fingers involved in the current event

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

These lists consist of objects that contain touch information:
1. Identifier: A numeric value that uniquely identifies the current finger in the touchscreen session.
2. The Target:dom element is the target of the action.
3. Customer/page/screen coordinates: Where the action takes place on the screen.
4. Radius coordinates and RotationAngle: Draw an oval roughly equivalent to the shape of the 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 scaling, rotating wait. The following code lets you use a single finger touch to drag around a DOM element:

 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 the element if
    (event.targetTouches.length = = 1) 
 {
  var touch = event.targettouches[0];
   Place the element in the position of the finger
   obj.style.left = touch.pagex + ' px ';
     Obj.style.top = touch.pagey + ' px ';
  }
}, False);

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

   Sets the canvas and exposes context-copying code
 canvas.addeventlistener (' touchmove ',   
 function (event) {for
    (var i = 0; i <) by CTX variables 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 a lot of interesting multi-touch demos everywhere, such as the canvas-based painting demo that Paul Irish and others implement.

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

Best practices

Block scaling

The default multi-touch settings are not particularly handy because your slides and gestures are often associated with the browser's behavior, such as scrolling and zooming.

To disable zooming, 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" >
Take a look at this article about 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 triggers a view bounce when scrolling beyond the bounds of the content. This is confusing in many multi-touch applications, but it's easy to disable it.

   Document.body.addEventListener (' Touchmove ', function (event) {
    event.preventdefault ();
   }, False); 

Carefully rendered

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

  Canvas.addeventlistener (' Touchmove ', function (event) {
   rendertouches (event.touches);
  },

But instead of expanding the number of fingers on the screen, the alternative is to keep track of all the fingers and then render them in a loop, which will allow for better performance:

  var touches = []
  canvas.addeventlistener (' Touchmove ', function (event) {
    touches = event.touches;
  }, False) ;
  Set a timer of 60 frames per Second
  = setinterval (function () {
   rendertouches (touches);
  }, 15);

Tip: SetInterval is not ideal for animations because it doesn't take into account the browser's own rendering loops. Modern desktop browsers provide requestanimationframe This function, based on performance and battery working time reasons, which is a better choice. 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 come in contact with the screen, not just those on the target DOM element. You may find it more useful to use event.targettouches and event.changedtouches instead of event.touches.

Last but not least, because you are developing mobile devices, you should be mindful of the best practices for moving, which are addressed in Eric Bidelman's article, and to understand this document.

Device Support

Unfortunately, the implementation of touch events is very different in completeness and quality. I wrote a diagnostic script to show some basic information about the implementation of the touch API, including which events are supported and the solution that Touchmove event triggers. I tested Android2.3.3 on Nexus One and Nexus S hardware, tested Android 3.0.1 on 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 tested browsers do not support them:
1. Touchenter: Move the finger into a DOM element.
2. Toucheleave: Move the finger away from a DOM element.
3. Touchcancel: Touch interrupted (Implementation specification).

The tested browsers also provide a list of touches, targettouches, and changedtouches within each touch list. However, the tested browsers do not support the RadiusX, RadiusY, or RotationAngle properties, which indicate the shape of the finger touching the screen. During a touchmove, the event triggers about 60 times a second, all of which are tested.