Comment: Newly added recognition support for advanced user input in IE10, give an example: Register a click operation, and you can know which device the current user's click is, whether it is a finger click, a mouse click or a stylus click (the tablet device will have a stylus)
IE10 newly added recognition support for advanced user input, for example: register a click operation, and through a sentence addEventListener, you can know which device the current user's click is, a finger click, a mouse click or a stylus click (the tablet device will have a stylus).
The above code can identify which device the current user's click is, and it also makes judgments through the callback method e.pointerType. The mouse is 4, the stylus is 3, and the finger is 2. As for what kind of equipment is a value of 1, it remains to be studied.
Another thing to note is that you want to add the identification of the input device in JavaScript, and the registration method events are also a bit different.
addEventListener The event added is MSPointerDown
In IE10, clicks of fingers that are preferred in recognition of such various devices are not affected by normal function clicking. 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 objects
The first step in handling gestures in your website is to instantiate the gesture object.
var myGesture = new MSGesture();
Next, provide a target element for the gesture. The browser will trigger a gesture event for 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 pointers 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: Don't forget that you need to use --ms-touch-action to configure elements to prevent them from performing default touch actions (for example, pan and zoom), and provide pointer events for input.
Handle gesture eventsOnce the gesture object has a valid target and has at least one pointer added, it will start triggering the gesture event. Gesture events can be divided into two types: static gestures (e.g., click or hold) and dynamic gestures (e.g., shrink, rotate, and swipe).
ClickThe most basic gesture recognition is clicks. When a click is detected, the MSGestureTap event will be triggered on the target element of the gesture object. Unlike click events, click gestures can only be triggered when the user touches, presses the mouse button, or uses a stylus to touch without moving. This is usually very useful if you want to distinguish between user clicking and dragging elements.
Long pressA long press gesture refers to the operation of the user touching the screen with one finger and holding it for a moment and lifting it without moving it. During long press interaction, the MSGestureHold event will be fired multiple times for various states of the gesture:
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 (contraction, rotation, swipe and drag)
Dynamic gestures (for example, shrinking or rotating) will be reported in the form of a transformation, which is quite similar to CSS 2D transformation. Dynamic gestures can trigger three events: MSGestureStart, MSGestureChange (repeated triggers as the gesture continues), and MSGestureEnd. Each event contains information about scaling (shrink), rotation, conversion, and speed.
Because dynamic gestures are reported in conversions, it will be very easy to use MSGesture with CSS 2D conversions to manipulate elements such as photos or puzzles. For example, you can enable scaling, rotating, and dragging elements in the following ways:
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 zooming and rotation can support mouse operations, which can be achieved by using CTRL or SHIFT modifiers respectively while rotating the mouse wheel.