Shulou(Shulou.com)06/01 Report--

This article is a detailed introduction to "how to use Javascript advanced gestures". The content is detailed, the steps are clear, and the details are properly handled. I hope this article "how to use Javascript advanced gestures" can help you solve your doubts. Let's go deeper and learn new knowledge together with the ideas of the small editor.

New support for advanced user input recognition added in IE10. Description: Register a click operation, and you can know which device the current user clicks on by adding EventListener, whether it is a finger click, a vertical mouse click or a touch pen click (tablet devices will have a touch pen).

MyCanvas.addEventListener（" MSPointerDown " ，MyBack， false ）;

Function MyBack (e){

alert（e.pointerType.toString（））;

}

More than this code is able to identify the current user's click is a device, through another method e.pointerType also determines. Mouse is 4, stylus is 3, finger is 2. As for only 1 is optional equipment remains to be studied.

Also note that if you want to add identification of the input device to javascript, the method event registered is also a little different.

addEventListener The event added is MSPointerDown

In IE10, the finger click that is prioritized in this type of multiple device recognition does not affect the normal function prompt. IE 10 not only recognizes the user's input device, but also supports a lot of advanced gestures.

Create a gesture object

The first step in working with gestures in your website is instantiating gesture objects.

var myGesture = new MSGesture();

Next, provide a target element for the gesture.

elm = document.getElementById("someElement");

myGesture.target = elm;

elm.addEventListener("MSGestureChange", handleGesture);

Finally, the gesture object is told to process certain pointers during Gesture Recognition.

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

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

myGesture.addPointer(evt.pointerId);

});

Note: Don't forget that you need to use-ms-touch-action to configure elements to prevent them from performing reset touch operations (for example, 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 triggering gesture events. Gesture events can be divided into two categories: static gestures (e.g., tap or hold) and dynamic gestures (e.g., pinch, rotate, and swipe).

click

The most basic Gesture Recognition is clicking. When a click is detected, an MSGestureTap event is triggered on the target element of the gesture object. Pointing to events, click gestures can only be triggered when the user touches, presses a mouse button or touches without moving using a stylus. This is often useful if you want to distinguish between user-clicked elements and pre-element actions.

long press

A long-press gesture is an operation in which a user touches the screen with one finger and holds it for a moment and lifts it without moving. During a long-press interaction, MSGestureHold events fire multiple times for various states of the gesture:

Copy code: www.mb5u.com

element.addEventListener（" MSGestureHold"，handleHold）;

function handleHold（evt）{

if（evt.detail&evt.MSGESTURE_FLAG_BEGIN）{

//Start indicates the start of the gesture. For the hold gesture, this means that the user has been holding it in place long enough that the gesture will become a full PR if the finger lifts ESS and holds.

}

if（evt.detail&evt.MSGESTURE_FLAG_END）{

//End means the gesture ends.

}

if（evt.detail&evt.MSGESTURE_FLAG_CANCEL）{

//Cancel indicates that the user started the gesture but canceled it. To keep it, this happens when the user drags it away before lifting it. This flag is sent along with the "End" flag to indicate that Gesture Recognition is complete.

}

}

Dynamic gestures (contraction, rotation, swipe and transformation)

Dynamic gestures (such as contraction or rotation) are reported as transitions, much like CSS 2D transitions. Dynamic gestures can trigger such events: MSGestureStart, MSGestureChange (continuous and repeated triggering of touch), and MSGestureEnd. Each event contains information about scaling (contraction), rotation, transformation, and speed.

Since dynamic gestures are reported in the form of transitions, it becomes very easy to manipulate elements such as photos or puzzles using MSGesture with CSS 2D transitions. For example, you can enable scaling, rotating, and resetting elements by:

Copy code: www.mb5u.com

targetElement.addEventListener（" MSGestureChange"，handlerElement）;

function handleElement (e){

//If you want to disable the built-in inertia provided by Dynamic Gesture Recognition, uncomment the following code

// 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 transformation origin to the center of the gesture

Below.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 origin of the translation back

}

Dynamic gestures such as zoom and rotate support mouse operations by rotating the mouse wheel while using CTRL or SHIFT modifier keys, respectively.

Read here, this article "Javascript advanced gesture how to use" article has been introduced, want to master the knowledge of this article also need to practice to understand, if you want to know more related content of the article, welcome to pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.