JavaScript Touch and Gesture events

Handling Touch events allows you to track the location of each finger of the user. You can bind the following four touch events:     1.touchstart:  //triggers      2 when the finger is placed on the screen. Touchmove: Trigger      3.touchend when  //finger moves on screen: trigger when  //finger picks up from the screen       4touchcancel: Triggered when the  //system cancels the touch event. As to when the system will be canceled, an unspecified attribute     1.client/clienty://the location of the touch point relative to the browser window viewport       2.pagex/pagey://the position of the touch point relative to the page      3.screenx/screeny://the position of the touch point relative to the screen       4.identifier://Touch Object unique Id  //touchstart event  function Touchsatrtfunc (e) {      //evt.preventdefault (); Block touch when browser zoom, scroll bar scrolling, etc.      var touch = e.touches[0]; Gets the first contact      var x = number (Touch.pagex); Page contact x coordinate      var y = number (touch.pagey); Page contact y coordinate      //record contact initial position      startx = x; &nbsP;    starty = y;  }  //touchmove event  function Touchmovefunc (e) {     //evt.preventdefault (); Block touch when browser zoom, scroll bar scrolling, etc.      var touch = evt.touches[0]; Gets the first contact      var x = number (Touch.pagex); Page contact x coordinate      var y = number (touch.pagey); Page contact y coordinate      var text = ' Touchmove Event Trigger: (' + x + ', ' + y + ') ';      //Judging slide Direction      if (X-startx! = 0) {    & nbsp;    //sliding around      }      if (Y-starty! = 0 {         //swipe up and down      }  }    mobile web Front-end development Series:  Event processing (b)    (2012-08-07 15:16:42) reproduced

Tags: gossip

Category: WebApp

In the previous article we talked about the basic HTML event, this article focuses on the touch event, touch Event trigger condition is the finger touch the screen, the finger to move on the screen or to leave the screen. An event is a collection of touches that start when the finger is first placed on the screen, ending at the last finger leaving the screen. All touch operations from the beginning to the end of an event are stored in the record for the same event.

Touch events

Touch events can be divided into single-touch and multi-touch, single-touch high-end machines are generally supported, Safari2.0, Android3.0 more than the version support multi-touch, support up to 5 fingers simultaneously touch the screen, ipad support up to 11 fingers simultaneously touch the screen, We can capture these events using the following event models,

Ontouchstart Ontouchmove ontouchend Ontouchcancel

When the user presses the finger on the screen, the Ontouchstart is triggered, and when the user moves one or more fingers, the ontouchmove is triggered, and the ontouchend is triggered when the user removes the finger. When will the ontouchcancel be triggered? When a higher-level event occurs, for example, alert, when there is a call or a push message, it cancels the current touch operation, which triggers the ontouchcancel. When you are developing a Web game, Ontouchcancel is important to you, you can pause the game or save the game when the ontouchcancel triggers.

Gesture Events

The gesture event operates in the same way as the touch event, except that the gesture event is triggered only when there are at least two fingers on the screen, so Safari2.0, Android3.0, and more, gestures have many advantages that can help us measure two-finger scaling and rotation operations, The event model is as follows,

Ongesturestart Ongesturechange Ongestureend

Event Properties

Whether you use touch or gesture events, you need to convert these events into separate touches to use them. To do this, you need to access a series of properties of the event object.

Targettouches all touch on all touch touches pages on all current touch changedtouches pages of the target element

Changedtouches, targettouches, and touches each contain slightly different touch lists. Targettouches and touches contain the list of fingers that are currently on the screen, but changedtouches only lists the last touch that occurred. This property is important if you are using Touchend or Gestureend events. In either case, the finger will no longer appear on the screen, so targettouches and touches should be empty, but you can still see what happened last by looking at the changedtouches array.

Because touch properties generate arrays, you can use JavaScript array functions to access them. This means that event.touches[0] will return the first touch, and you can use Event.touches.length to calculate the number of currently stored touches.

When viewing individual touches, you can also access other touches by using event.targettouches[0], and each touch will contain some specific information,

ClientX, ClientY relative to the current screen x or y position PageX, pagey x or Y position in relation to the overall page ScreenX, ScreenY Unique identifier of the identifier event relative to the X or Y position of the user's computer screen target Target object for the build touch

The event object for a gesture event will be two more properties than a normal touch event.

Rotation value of the rotation angle scale of the finger

JavaScript Touch and Gesture events