Wheel events encountered need to listen, to achieve page interaction in development, but at the same time need to be compatible multiport
PC side can properly use the mouse to achieve the results page, and is compatible with advanced browsers, including Edge browser;
However, the use ThinkPad touchpad and touch screen, for example, when using the Edge iPad browser, you can not scroll or use the touch trigger trigger,
Upon inquiry found
-
chrome / webkit in touch thousand events in invalid edge, edge of the continuation of IE10 + MSPointer thousand events;
-
However edge of the touch event turned off by default, see below;
-
- surface touchpad "two fingers to drag scrolling", do not trigger MSPointer Lord of the event both in IE11 or edge.
Statistics show that, W3C defines a new input form, that pointer. Any contact with the mouse, touch, stylus or other input device is triggered on the screen, are regarded pointer events.
Its API and mouse events like, very easy to migrate. In addition to mouse events common attributes, such as clientX, target, etc., also provides some other input device for attributes, such as pressure, contact surface, the inclination angle and the like, so that developers can use the pointer for all input events the function of the device to develop their own!
It provides properties
pointer event offers some unique event properties
- pointerId: The current pointer that uniquely identifies the event, mainly in the identification of a unique multi-touch input source
- width: the width of the contact surface
- height: the height of the contact surfaces
- pressure: the value of the contact pressure, in the range of 0-1, for the hardware does not support pressure, such as a mouse, this value must be 0.5 when pressed, otherwise 0
- tiltX, titltY: stylus angle
- pointerType: type of event, there are mouse, pen, touch, if the pointer type is not detected, the value is an empty string
- isPrimary: whether it is used to identify the main pointer, mainly take effect in multi-touch, developers can also be achieved by a single touch pointer event ignoring the non-primary pointer.
How to determine the main pointer:
Mouse input: the main pointer must be
Touch input: no other touch-activated trigger event if pointerdown, isPrimary is true
Stylus input: touch event is similar to no other active pointer trigger event pointerdown
Related events
| Event Name | effect |
|---|---|
| pointerover | Consistent with the mouseover behavior |
| pointerenter | Behavior consistent with mouseenter |
| pointerdown | Pointer into an active state, such as a touch screen, similar to the touchstart |
| pointermove | Moving the pointer |
| pointerup | Pointer cancel active, such as your finger off the screen, similar to the touchend |
| pointercancel | Similar touchcancel |
| pointerout | Pointer leaves the element or away from the edge of the screen, similar to mouseout |
| pointerleave | Similar mouseleave |
| gotpointercapture | When the element captures the pointer to trigger events |
| lostpointercapture | Pointer trigger is released |
You can see, pointer events consistent with the known types of events, but with a difference: on the touch screen, we could slide the screen to trigger a page scrolling, zooming, or refresh, for touch events, then triggers touchmove, but for pointer events are triggered when the browser behavior, but you will receive pointercancel event in order to inform you that the browser has taken over your pointer events.
How to detect
First, the level of support pointer events has been very good, you can use the Pointer Events polyfill ( local download ) to be compatible, it can be self-testing
if
(window.PointerEvent) {
// 支持
}
else
{
// 不支持
}