The touch event in JS and the gesture (gesture) event __js

One: Touch event category.
1. Touchstart: Triggered when the finger touches the screen. No matter how many fingers are placed on the screen, a touch of the screen will trigger it. Here, I used the millet Google browser to do an experiment, add a counter, to see the screen finger touch the number of times, the code is as follows:

    Window.onload = function () {
        var i = 0;
        Document.addeventlistener (' Touchstart ', function (event) {
            mydiv.innerhtml = ' Number of touch screens: ' + i++;
        },false
    }}

1 2 3 4 5 6

2.touchmove: When the finger is sliding on the screen it triggers the event, during which the Event.preventdefault () can be used to prevent scrolling;
3.touchend: Trigger when the finger moves away from the screen;
4.touchcancel: Triggered when the system stops tracking touch. (without explanation)
For example, we use the front three events on the phone screen to get the position of the finger, the pressure, the value of the contact: The effect is as follows:

HTML and CSS code:

<! DOCTYPE html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20-21
JS Code:

        function TouchEvent (event) {event = event | | window.event;
        var mydiv2 = document.getElementById (' myDiv2 ');
        var Mydivstart = document.getElementById (' Mydivstart ');
        var mydivmove = document.getElementById (' Mydivmove ');
        var mydivend = document.getElementById (' mydivend ');
        var Myradius = document.getElementById (' Myradius ');
        var force = document.getElementById (' Force ');
        var rotationangle = document.getElementById (' Rotateangle ');
        var Coordinatex = Event.changedtouches[0].clientx;  

        var coordinatey = Event.changedtouches[0].clienty;  
        Mydiv2.style.left = parsefloat (Coordinatex) -20 + ' px ';
        Mydiv2.style.top = parsefloat (coordinatey) -20 + ' px '; myradius.innerhtml = "Touch radius: (" + event.changedtouches[0].radiusx.tofixed (2) + ', ' + event.changedtouches[0].
        Radiusy.tofixed (2) + ")";
     rotationangle.innerhtml = "Touch rotationangle:" + event.changedtouches[0].rotationangle;   force.innerhtml = "Touch Force:" + event.changedtouches[0].force.tofixed (3);
        var IntX = parseint (Coordinatex);
        var inty = parseint (Coordinatey); Switch (event.type) {case "Touchstart": mydivstart.innerhtml = "Touch started: (" + Event.touch
                Es[0].clientx.tofixed (2) + ', ' + event.touches[0].clienty.tofixed (2) + ")";
                Console.log (event);
            Break Case "Touchmove": Event.preventdefault ()//stop scrolling mydivmove.innerhtml = "Touch Moved: ("
                + IntX + ', ' + inty + ') ';
                Console.log (event);
            Break
                Case "Touchend": mydivend.innerhtml = "Touch End: (" + IntX + ', ' + Inty + ")";
                Console.log (event);
                myradius.innerhtml = "Touch radius: (0.00,0.00)" force.innerhtml = "Touch force:0.00";
        Break } document.addeventlistener ("Touchstart", touChevent,false);
    Document.addeventlistener ("Touchmove", Touchevent,false); Document.addeventlistener ("Touchend", Touchevent,false);
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
Two: Touch events corresponding event objects.
According to the code above, you can get a TouchEvent object when the touch event is triggered, as shown in the following figure:

Common with the above three kinds of attributes, in doing some effect, but also with the following three properties of the Touchlist object to determine the elements of all information.
1.touches: The properties of the touch object that represents the current tracing operation;
2.targetTouches: An array of touch objects that represent the target of a particular event.
3.changeTouches: An array of touchscreen objects that have changed since the last touch.
All of these properties are an object containing the name Touchlist, when the trigger point is 1 (that is, event.touches.length ===event.targettouches.lengh = = Event.changeTouches.length), they contain all the information about the touch point, but this time it contains information, but execution (event.targettouches = = event.touches) Returns a value of false. That is to say, there must be some places are not the same, temporarily not found, as shown in the following figure:

Here are some of the key properties of the touched position: Clientx and Clienty properties: coordinates relative to the viewport, identifier: Identifies the unique ID of the touch, Pagex and Pagey: relative to the page's coordinates; Screenx and Screeny: relative to the screen coordinates, RADIUSX and radiusy: the horizontal axis (x-axis) radius and the vertical axis (y-axis) radius of the smallest ellipse that can surround the contact surface of the user and the touch plane; RotationAngle: this property and Touch.radiusx, Touch.radiusy Together, describes the interface between the user and the touch plane. Force: Returns the pressure size of the finger squeezing the touch plane, from 0.0 (without pressure) to 1.0 (maximum pressure) of the floating-point number. Target: The touch DOM node destination.
Note: When the Touchend event occurs, the Touchlist object in the touches and targettouches properties does not have anything, so the changetouches attribute must be used to obtain information about the trigger point.
Three: Touch, mouse and click event Trigger sequence.
Touch events and click event Trigger order:
1.touchstart event;
2.mouseover event;
3.mousemove event (once);
4.mousedown event;
5.mouseup event;
6.click event;
7.touchend event.
Compatibility: iOS version of Safari, Android version of WebKit, Bada version of Dolfin, BlackBerry WebKit in OS6, Mobile10.1 in opera and LG's proprietary Phantom browser. But only safari in iOS supports multi-touch. Desktop versions of firefox6+ and chrome also support touch.
Four: Gesture event in iOS2.0: Gesture Event
Note: The following events can only be run in iOS. When two fingers are operated in the iOS mid-range, gestures are generated and gestures are usually used to change the size of the displayed element or to rotate the displayed element. Gesture events are divided into three types:
1.gesturestart: When one finger has been pressed on the screen, another finger touches the screen when it triggers. Similar to the role of Touchstart;
2.gesturechange: Triggers when the position of any finger on the touch screen changes.
3.gestureend: Triggers when any one of the fingers moves away from the screen.
The following code is not available on Android and can only be used on iOS:
    var mydiv = document.getElementById (' mydiv '); 
                function gesture (event) {Console.log (event) switch (event.type) {case "Gesturestart":
                mydiv.innerhtml = "gesture Start (rotation=" + event.rotation + ', scale= ' + Event.scale + ') ';
            Break Case "Gesturechange": mydiv.innerhtml = "gesture Change (rotation=" + event.rotation + ', scale= ' + event.)
                Scale + ') ';
            Break  Case "Gestureend": mydiv.innerhtml = "gesture End" (rotation= "+ event.rotation +", scale ' + Event.scale +
                ')';
        Break
    } document.addeventlistener (' Gesturestart ', gesture,false);
    Document.addeventlistener (' Gesturechange ', gesture,false); Document.addeventlistener (' Gestureend ', gesture,false);