Mobile Touch touch screen swipe event, swipe touch screen event monitoring!

First, touch events

Ontouchstart, Ontouchmove, Ontouchend, Ontouchcancel

Currently mobile browsers support these 4 touch events, including ie. Because the touchscreen also supports MouseEvent, their order is important to note: Touchstart→mouseover→mousemove→mousedown→mouseup→click1

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.

Second, the specification

Here we introduce some of the more popular touch events, you can test this event in most modern browsers (must be a touchscreen device OH):

Touchstart: trigger when Touch is started

touchmove: triggers when the finger slides on the screen

touchend: trigger at end of touch

Each touch event includes three touch lists, each containing a series of touch points (for multi-Touch):

touches: A list of all the fingers that are currently on the screen.

targettouches: The list of fingers that are located on the current DOM element.

changedtouches: A list that involves the finger of the current event.

Each touch point consists of the following touch information (commonly used):

identifier: A numeric value that uniquely identifies the current finger in a touch session. Usually starting from 0 serial number (ANDROID4.1,UC)

Target: The DOM element, which is the target of the action.

/// pageX pageX clientX clientY/screenX/screenY : A numeric value where the action takes place on the screen (page contains scrolling distance, client does not contain scrolling distance, screen is based on screens).

radiusX / radiusY/ RotationAngle: draws approximately the shape of a finger oval, respectively, two radius and rotation angle of the ellipse. Initial test browser does not support, fortunately the function is not commonly used, welcome feedback.

With this information, we can provide users with different feedback based on these event messages.

Below, I will show you a small demo, with Touchmove implementation of single-finger drag:

/** * ontouchevent */var div = document.getElementById ("div"); //touchstart similar to mousedownDiv.ontouchstart = function (e)   the touches property of the {//event is an array where one element represents a touch point at the same time, So that each touch point of multitouch can be obtained through touches   //Because we have only one touch, so direct pointing to [0]   var touch = e.touches[0];   Gets the coordinates of the current touch point, equivalent to the Clientx/clienty   var x = Touch.clientx of the MouseEvent event;   var y = touch.clienty;}; //touchmove similar to mousemovediv.ontouchmove = function (e) {   //can be Touchstart, Touchmove event plus preventdefault to prevent browser zoom, scroll bar scrolling, etc.   e.preventdefault ();}; //touchend like MouseUpdiv.ontouchup = function (e) {   //nothing to do};

Third, gesture events

Gesture refers to the use of multi-touch rotation, stretching and other operations, such as the enlargement, rotation of the page. Gesture events are triggered when two or more fingers are required to touch simultaneously. One of the things we need to note about scaling is the position coordinates of the element: we usually get the position coordinates of the element using OffsetX, Getboundingclientrect, and so on, but in the mobile browser The page is often scaled in use, and the scaled element coordinates change? The answer is somewhat different. Use a scenario to illustrate the problem: After page A is loaded, JavaScript obtains the coordinates of the element in document (100,100), and then the user enlarges the page, and then outputs the coordinate of the element again with JavaScript, still (100,100), However, the element's response area on the screen is offset based on the scale. You can open that brick game demo, and then zoom in when the page is fully loaded, and you'll notice that even if your finger touches outside of the "touch here" area, you can control the ball board because the area is offset. The offset will persist unless the page refreshes or the zoom is restored.

/** * ongestureevent */var div = document.getElementById ("div");d Iv.ongesturechange = function (e) {   // Scale represents the magnification that the gesture produces, less than 1 is reduced, greater than 1 is magnified, and the original is 1   var scales = E.scale;   The rotation represents the angle of the rotation gesture, the value interval [0,360], positive clockwise rotation, negative value counterclockwise   var angle = e.rotation;};

Four, Gravity induction

Gravity sensing is simpler, just adding onorientationchange events to the Body node. In this event, the Window.orientation property is given the value that represents the current phone's direction. The list of values for Window.orientation is as follows:
0: Same orientation as page first load
-90: In the original direction clockwise turn 90°
180: Turn 180°
90: Counterclockwise turn 90° as far as I am tested, Android2.1 has not yet supported gravity sensing. These are the current touchscreen events that have not been incorporated into the standard but have been widely used. I Android2.1, did not test in other environment.

Mobile Touch touch screen swipe event, swipe touch screen event monitoring!