JS-Touch event on mobile device terminal

Most of the interaction of mobile devices is achieved by touching touch, because mobile devices typically have a capacitive touchscreen (capacitive touch-sensitive screen) to capture the interaction of the user's finger. For touch-screen interactive websites, games, touch events are quite important. Apple introduced touch event api,android in iOS 2.0 and is catching up to this fact standard to narrow the gap. A recent work group is working together to develop this touch event specification.

Briefly describe the multi-touch event model supported by the browser on iOS (primary safari), and then upgrade the simple touch action to gesture (Gestrue).

Safari on iOS also supports traditional interactive events like Click and MouseOver, but it's not recommended to use Click and mouseover on iOS browser apps, because these two events are designed to support mouse clicks. The Click event has a delay of about half a second on iOS because iOS wants to highlight the element that receives the click. Events such as Mouseover/out are triggered by the click of a finger. Therefore, on iOS, you should discard the traditional interactive event model and accept a new event model. Touch events and more advanced gesture events allow your Web pages to interact like native apps.

The touch event starts when the user's finger is on the screen, when it slides on the screen, or when it is removed from the screen.

The gesture event is a more advanced package for touch events, mainly dealing with finger slide, rotate, scale, and more.

1. across mobile device ( touch screen ) Common touch Handling events:

Touchstart: Triggered when the finger touches the screen, even if a finger has been placed on the screen. Touchmove: Triggers continuously when the finger slides on the screen. During this event, calling the Preventdefault () event can prevent scrolling. Touchend: Triggers when the finger picks up from the screen. Touchcancel: Triggered when the system stops (cancels) tracking touch touch. The exact departure time for this event is not specified in the documentation ( unknown). 

All of these events will bubble up and can be canceled. Although these touch events are not defined in the DOM specification, they are implemented in a way that is compatible with the DOM. So, the event object for each touch event provides properties that are common in mouse practice: bubbles (the type of bubbling event), cancelable (whether the default action associated with the event can be canceled with the Preventdefault () method), and so on.

2. Each touch event includes three touch lists (i.e. properties for tracking touches ), each list contains a corresponding series of touch points (for multitouch):

Touches: A list of all the fingers that are currently on the screen (an array of touch objects that represent the touching operation that is currently being tracked) Targettouches: A list of the fingers on the current DOM element (an array of touch objects specific to the event target) Changetouches: involves the current event A list of the fingers (an array of touch objects that indicate what has changed since the last touch)

3 . Each touch point consists of the following touch information (common important attributes):

The event object via touch event handler (typically through the Event.changedtouches property). ---pagex/pagey/clientx/clienty/screenx/screeny: A numeric value where the action occurs on the screen (page contains scroll distance > relative page, client does not contain scrolling distance > relative viewport >　> Touch Point relative to the location of the viewport in the browser window, screen is the baseline > relative screen). ---target: Touch the destination DOM node. (DOM element, which is the target of the action)---Identifier: Identifies the unique ID of the touch. (uniquely identifies the current finger in a touch session)---Radiusx/radiusy/rotationangle: Draws an ellipse roughly equivalent to the shape of a finger, two radii and rotation angle of the ellipse, respectively. (not tested)

Finally, let's look at a couple of examples:

Demo1:

Demo2:

DEMO3:

Turn from:

HTML mobile Internet Terminal JavaScript Touch event, Touchstart, Touchend, Touchmove

Web front-end development (www.css119.com) – Touch events for mobile internet terminals, Touchstart, Touchend, Touchmove

Mobile HTML Touch Event

JS-Touch event on mobile device terminal