Introduction to the use of advanced gestures in Javascript_html5 tutorial skills

The newly added recognition support for advanced user input in IE10, for example: register a click operation, and through the sentence addEventListener, you can know which device the current user clicks on, whether it is a finger click or a mouse click. Or click with a stylus (tablet devices all come with a stylus).

<canvas id="MyCanvas">canvas >
MyCanvas.addEventListener( "MSPointerDown"
, MyBack, false); function MyBack(e) {                                                                                                                                                                             ; >
The above code can identify which device the current user clicks on, and determine it through e.pointerType in the callback method. The mouse is 4, the stylus is 3, and the finger is 2. As for what kind of device the value 1 is, it remains to be studied.
Another thing to note is that if you want to add recognition of input devices in JavaScript, the registered method events are also a little different.
The event added by
addEventListener is MSPointerDown In IE10, for such multiple device recognition, finger clicks are prioritized, provided that the normal click function is not affected. However, IE10 not only recognizes the user's input device but also supports a lot of advanced gestures The following is a demonstration of IE10 advanced gesture support

Create Gesture Object

The first step in handling gestures in your website is to instantiate a gesture object.

<span style="COLOR: blue">var<p> myGesture = <span style="COLOR: blue">new</span></p> MSGesture();</span>

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

elm = document.getElementById(<span style="COLOR: maroon">"someElement"</span>

);

<span style="COLOR: blue">var</span> myGesture = <span style="COLOR: blue">new</span> MSGesture();

elm.addEventListener(<span style="COLOR: maroon">"MSGestureChange"</span>

, handleGesture);

Finally, tell the gesture object which pointers to handle during gesture recognition.

elm.addEventListener(<span style="COLOR: maroon">"MSPointerDown"</span>, <span style="COLOR: blue">function</span> (evt) {

<span style="COLOR: rgb(0,100,0)">// adds the current mouse, pen, or touch contact for gesture recognition</span>

myGesture.addPointer(evt.pointerId);

});

Note: Don't forget that you need to use –ms-touch-action to configure the element to prevent it from performing default touch actions (e.g., pan and zoom) and to provide pointer events for input.

Handling gesture events

Once a gesture object has a valid target and at least one pointer added, it will start firing gesture events. Gesture events can be divided into two types: static gestures (for example, click or hold) and dynamic gestures (for example, pinch, rotate, and swipe).

Click

The most basic gesture recognition is click. When a click is detected, the MSGestureTap event will be fired on the target element of the gesture object. Unlike click events, tap gestures can only be triggered when the user touches, presses a mouse button, or touches with a stylus without moving. This is often useful if you want to distinguish between a user clicking on an element and a user dragging it.

Long press

The long press gesture refers to an operation in which the user touches the screen with one finger, holds it for a moment and lifts it without moving. During a long press interaction, the MSGestureHold event will be triggered multiple times for various states of the gesture:

Copy code

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 (pinch, rotate, swipe and drag)

Dynamic gestures (e.g. pinch or rotate) are reported as transitions, much like CSS 2D transitions. Dynamic gestures can trigger three events: MSGestureStart, MSGestureChange (which fires repeatedly as the gesture continues), and MSGestureEnd. Each event contains information about scaling (shrinking), rotation, transformation, and speed.

Since dynamic gestures are reported as transitions, it's easy to manipulate elements like photos or puzzles using MSGesture that includes CSS 2D transitions. For example, you can enable scaling, rotating, and dragging elements via:

Copy the code

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.target.style.transform); // Get the latest CSS transform on the element
e.target.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 rotation can support mouse operations, which can be done by rotating This is achieved by using the CTRL or SHIFT modifier keys respectively while using the mouse wheel.