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

This article mainly introduces "how to use the advanced gestures of Javascript". In the daily operation, I believe many people have doubts about how to use the advanced gestures of Javascript. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "how to use the advanced gestures of Javascript"! Next, please follow the editor to study!

New recognition support for advanced user input added in IE10, for example: register a click operation, through an addEventListener you can know what kind of device the current user's click is, whether it is a click of a finger, a click of a mouse or a click of a stylus (tablet devices will have a stylus)

New recognition support for advanced user input added in IE10, for example: register a click operation, through an addEventListener you can know what kind of device the current user's click is, whether it is a click of a finger, a click of a mouse or a click of a stylus (tablet devices will have a stylus).

MyCanvas.addEventListener ("MSPointerDown", MyBack, false)

Function MyBack (e) {

Alert (e.pointerType.toString ())

}

The above code can identify which device the current user's click is, and e.pointerType can also determine it in the callback method. The mouse is 4, the stylus is 3 and the finger is 2. What kind of equipment with a value of 1 remains to be studied.

It is also important to note that you want to add the identification of the input device to the javascript, and the registration method events are also a little different.

The event added by addEventListener is MSPointerDown

In IE10, the clicks of fingers that are given priority in such a variety of device identification are provided that the normal click of the function is not affected. However, IE10 not only recognizes the user's input device, but also supports a lot of advanced gestures.

Create a gesture object

The first step in dealing with gestures in your site is to instantiate gesture objects.

Var myGesture = new MSGesture ()

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

Elm = document.getElementById ("someElement")

MyGesture.target = elm

Elm.addEventListener ("MSGestureChange", handleGesture)

Finally, the gesture object is told which pointers are processed 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 the element to prevent it from performing default touch operations (such as panning and zooming) and to provide pointer events for input.

Dealing with gesture events

Once the gesture object has a valid target and at least one pointer has been 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 swipe).

Click

The most basic gesture recognition is click. When a click is detected, the MSGestureTap event is triggered in the target element of the gesture object. Unlike a click event, a click gesture can only be triggered when the user touches, presses a mouse button, or uses a stylus without moving. This is usually useful if you want to distinguish between users clicking on an element and dragging an element.

Long press

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

Copy the 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 cancelled 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 (shrink, rotate, swipe and drag)

Dynamic gestures (for example, shrink or rotate) are reported in the form of transformations, which are similar to CSS 2D transformations. Dynamic gestures trigger three kinds of events: MSGestureStart, MSGestureChange (triggered repeatedly as the gesture continues), and MSGestureEnd. Each event contains information about scaling (shrinking), rotation, conversion, and speed.

Because dynamic gestures are reported in the form of transformations, it is easy to use MSGesture with CSS 2D transformations to manipulate elements such as photos or puzzles. For example, you can enable scaling, rotating, and dragging elements in the following ways:

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

Math.PI (e.rotation * 180) / / 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 zooming and rotating can support mouse operation by using CTRL or SHIFT modifier keys while rotating the mouse wheel.

At this point, the study of "how to use the advanced gestures of Javascript" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.