_javascript Techniques for JavaScript event analysis in touch screen

This example describes the JavaScript events in the touchscreen. Share to everyone for your reference. The specific analysis is as follows:

First, touch events

Ontouchstart
Ontouchmove
Ontouchend
Ontouchcancel current Mobile-end browsers support these 4 touch events, including ie. Because the touchscreen also supports MouseEvent, their order is to be noted: Touchstart→mouseover→mousemove→mousedown→mouseup→click1

Examples are as follows:

/**
* ontouchevent
/var div = document.getElementById ("div");
Touchstart similar to MouseDown
Div.ontouchstart = function (e) {
//Event touches property is an array in which an element represents a touch point at the same moment.
Thus, each touch point of multi-touch can be obtained by touches/
/Because we have only one touch, so we point directly 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 MouseMove div.ontouchmove = function (e) {
//can be Touchstart, Touchmove event plus preventdefault to prevent touch,
//Browser zoom, scroll bar scrolling, etc.
e.preventdefault ();
Touchend resembles MouseUp
div.ontouchup = function (e) {
//nothing to do
};

Gesture event gesture refers to the use of multi-touch to rotate, stretch and other operations, such as pictures, Web page magnification, rotation. Gesture events are triggered when two or more fingers are required to touch simultaneously. What we need to note about scaling is the coordinates of the elements: we usually use OffsetX, Getboundingclientrect, and other methods to get the coordinates of the elements, but in the mobile browser The page is often scaled in use, and the scaled element coordinates will change? The answer is different. Use a scenario to illustrate the problem: After page A is loaded, JavaScript gets the coordinates of the element in document (100,100), and then the user zooms in on the page, outputting the element coordinates again with JavaScript, still (100,100), However, the response area of the element on the screen is offset by the scaling scale. You can open the Brick game demo, and so on when the page is fully loaded, and then zoom in, you will find that even if the finger touch in the "touches here" area outside, you can control the ball plate, because the area has been offset. The offset persists unless the page refreshes or restores the zoom.

/**
* ongestureevent
/var div = document.getElementById ("div");
Div.ongesturechange = function (e) {
//scale represents the scale of the gesture, less than 1 is reduced, greater than 1 is magnified, the original 1
var scale = E.scale;
The rotation represents the angle of the rotational gesture, the value range [0,360], the positive clockwise rotation, the negative counterclockwise
var angle = e.rotation;

Third, gravity induction is relatively simple, only to add Onorientationchange event for the body node. In this event, the Window.orientation property gets a numeric value representing the direction of the current phone. The list of values for Window.orientation is as follows:

0: The same direction as when the page is first loaded
-90: Relative to the original direction clockwise turned 90°
180: Turned 180°
90: Counterclockwise Turn 90° According to my test, Android2.1 has not yet supported the gravitational induction. This is the current touch-screen event, which has not yet been incorporated into the standard, but has been widely used. I Android2.1, not in other environment test.

PS: Here again for you to provide a JS event on the online tool, summed up the JS commonly used event types and function functions:

JavaScript event and Feature description encyclopedia:

Http://tools.jb51.net/table/javascript_event

I hope this article will help you with your JavaScript programming.