Pointer events

Each hut has its own toys

Until some time, the front-end developer, when writing javascript code designed for user interaction, focused only on mouse events. Then various devices appeared that used other forms of user interaction with the application — sensors or a pen. Types of events for each device were offered individually. So, besides mousedown, mousemove, etc., touchstart, touchmove and other events have appeared.

This approach requires alternative functions to support a new type of device. This often causes incompatibility problems if the application was originally designed for a single device. In addition, current platforms that use touch events also respond to some mouse events (for example, mousedown) for backward compatibility. This makes the use of such mouse events ambiguous, it is not possible to determine with which device the user works. In addition, there are a number of serious differences in the operation of mouse events on touch devices:

• Mouse events occur only after sensory;
• Mouseover and other similar events will not work without touching the device. Handlers for such events should be run by default or they should be replaced with the event 'click' on the element;
• Click events will not run when the DOM tree changes the document;
• Click events are triggered not immediately, but after approximately 300 ms;
• Touch and mouse events, in some cases, conflict with each other.

As a result, when writing an application, the front-end developer has to handle several types of events, mouse events on desktop PCs and touch events for touch devices. The code becomes cumbersome, the development process is time consuming ..
')

Husband and wife, one of Satan

Back in September 2012, Microsoft presented the following idea: the final developer does not have to think about which interface the user works with, whether he clicks the mouse, presses his finger or the stylus. As a result, so-called pointer-events (MSPointerDown, MSPointerMove, etc.) appear in Internet Explorer 10.0, which are designed to work equally on all devices. This kind of events in this browser has the prefix MS and, accordingly, does not work in other browsers.

Pointer-events not only allow you to support all existing devices, MSPointer is designed in such a way that newly created devices can be just as easily added to this list, existing code will automatically support them.

The pointer-event object provides additional properties that help determine the type of user interaction with the application (mouse, touch, stylus), the user's touch-sensitive area geometry, pressure, and pen tilt. If desired, the developer can write a unique code for each input device.

Another great advantage of point events is that they support pointing (over and out events). At the moment, most touch input devices have a hardware limitation that prevents them from tracking event data. However, in 2012, Sony announced the first mobile phone with “Floating Touch” (floating touch technology), which allows you to control the device from a distance by lifting your finger to the screen - Sony Xperia Sola. Thus, point events provide a clean solution not only for developers, but also for manufacturers.

The idea was adopted by the WWW consortium, as a result of which the Pointer events standard was developed, which at the time of this writing has the status of “candidate for recommendation”. This does not mean that W3C members have approved this concept; the project can be replaced, recognized as obsolete at any time. However, the document is still under development, this kind of events has great chances for further existence, despite the fact that it is now supported only in Internet Explorer 11 (in Internet Explorer 10.0 and in IE Mobile 10.0 with a prefix); Firefox 27.0, Chrome 33.0, Safari 6.0, Opera 18.0, IOS Safari 7.0, Opera Mini 7.0 Android Browser 4.4 do not support this kind of events even with a prefix.

For enthusiasts and for those who doubt the possibility of cross-browser application of pointer events in the near future, MS Open Tech (controlled by Microsoft) in December 2012 announced the Pointer Events prototype for the WebKit engine. Download the prototype, as well as get acquainted with the documentation on the site http://www.html5labs.com

Take the bull by the horns

For developers of cross-browser and cross-platform applications, there are several plug-ins with which you can use pointer-events now. For example, the plugin hand.js , which is located on CodePlex . It supports almost all point events in all modern browsers. Internet Explorer is supported since version 9. For those who focus on IE8 and below - still have to write additional code.

We will not consider the library of pointerevents at the moment, since Internet Explorer is supported in it, starting with version 10, which is not enough for the Russian part of the Internet.

We should also mention the jQuery library, the developers of which consider that the pointer-event model is easier to use and more promising. At the moment, point events are not supported directly in jQuery, but, of course, there is a jQuery plug-in PointerEvents , which is designed to fix this flaw.

As you can see, pointer-events can be applied today. And, quite likely, in a few years the mouse events will be a thing of the past ...