Introduction to Javascript advanced gestures

Comments: Recognition Support for advanced user input added in IE10. For example, register a click operation and use addEventListener to know which device the current user clicks, click the finger, click the mouse, or click the touch pen (the tablet device will have a touch pen)

The newly added recognition support for advanced user input in IE10. For example, register a click operation and use addEventListener to know which device the current user clicks, click a finger, click a mouse, or click a touch pen (a tablet device will have a touch pen ).

<Canvas id = "MyCanvas"> </canvas>
<Script>
MyCanvas. addEventListener ("MSPointerDown", MyBack, false );
Function MyBack (e ){
Alert (e. pointerType. toString ());
}
</Script>

The above code identifies the device that the current user clicks. e. pointerType In the callback method is used to determine the device. The mouse is 4, the touch pen is 3, and the finger is 2. The device with the value of 1 remains to be studied.

You also need to note that you want to add the identification of the input device in javascript, and the registration method events are also slightly different.

The event added by addEventListener is MSPointerDown.

In IE10, if you click the finger that is preferentially processed in the recognition of multiple devices, the premise is that the function can be clicked normally. However, IE10 not only recognizes user input devices, but also supports many advanced gestures.

The following is a demonstration of IE10 advanced gesture support.

 

Create a gesture object

The first step for processing gestures on your website is to instantiate the gesture object.

var myGesture = new MSGesture();

Next, provide a target element for the gesture. The browser triggers a gesture event on this element. At the same time, this element can also determine the coordinate space of the event.

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

Finally, tell the gesture object which pointer to process during gesture recognition.

elm.addEventListener("MSPointerDown", function (evt) {

// adds the current mouse, pen, or touch contact for gesture recognition

myGesture.addPointer(evt.pointerId);

});

Note: Do not forget to use–ms-touch-actionTo configure elements to prevent them from performing default touch operations (such as translation and scaling) and provide pointer events for input.

Handling gesture events

Once a gesture object has a valid target and at least one pointer is added, it starts to trigger the gesture event. Gesture events can be divided into two types: static gestures (for example, click or hold) and dynamic gestures (for example, shrink, rotate, and sweep ).

Click

The most basic gesture recognition is click. When a click is detected, it is triggered on the target element of the gesture object.MSGestureTapEvent. Unlike click events, click gestures can only be triggered when you touch, press the mouse button, or use a pen to touch without moving. If you want to differentiate between clicking and dragging elements, this feature is usually very useful.

Long press

A long-pressed gesture means that the user uses a finger to touch the screen and keeps the screen up for a moment without moving it. During long press interaction,MSGestureHoldThe event is triggered multiple times for the gesture status:

The Code is as follows:
Element. addEventListener ("MSGestureHold", handleHold );
Function handleHold (evt ){
If (evt. detail & evt. MSGESTURE_FLAG_BEGIN ){
// Begin signals the start of a gesture. for the Hold gesture, this means the user has been holding long enough in place that the gesture will become a complete press & hold if the finger is lifted.
}
If (evt. detail & evt. MSGESTURE_FLAG_END ){
// End signals the end of the gesture.
}
If (evt. detail & evt. MSGESTURE_FLAG_CANCEL ){
// Cancel signals the user started the gesture but canceled it. for hold, this occurs when the user drags away before lifting. this flag is sent together with the End flag, signaling the gesture recognition is complete.
}
}

Dynamic gestures (scale, rotate, sweep, and drag)

Dynamic gestures (for example, scale down or rotate) are reported in conversion form, which is quite similar to CSS 2D conversion. Dynamic gestures can trigger three types of events:MSGestureStart,MSGestureChange(Trigger repeatedly as the gesture continues) andMSGestureEnd. Each event contains information such as scaling, rotation, conversion, and speed.

Because dynamic gestures are reported in a conversion formMSGestureIt is easy to operate on elements such as photos or puzzles. For example, you can enable zoom, rotate, and drag elements in the following ways:

The Code is as follows:
TargetElement. addEventListener ("MSGestureChange", manipulateElement );
Function manipulateElement (e ){
// Uncomment the following code if you want to disable the built-in inertia provided by dynamic gesture recognition
// If (e. detail = e. MSGESTURE_FLAG_INERTIA)
// Return;
Var m = new MSCSSMatrix(e.tar get. style. transform); // Get the latest CSS transform on the element
E.tar get. style. transform = m
. Translate (e. offsetX, e. offsetY) // Move the transform origin under the center of the gesture
. Rotate (e. rotation * 180/Math. PI) // Apply Rotation
. Scale (e. scale) // Apply Scale
. Translate (e. translationX, e. translationY) // Apply Translation
. Translate (-e. offsetX,-e. offsetY); // Move the transform origin back
}


Dynamic gestures, such as scaling and rotating, support mouse operations. You can use CTRL or SHIFT to modify the scroll wheel while rotating the mouse.