How to enable pointer events

Question

I noticed that in my angular app the property

window.navigator.pointerEnabled

returns true

Now, because I would like to do some testing which involves pointer-events inside a jsfiddle.net I noticed that these events are not present there. This probably has something to do with the fact that here the pointerEnabled property is undefined.

My question is, how is this property controlled, how can I enabled it?

Answer 1

If you're testing your code in Firefox, you need to configure the browser to enable pointer events, as they're not enabled by default at the moment (my current latest upgrade as of 2017.xi.15 is Firefox Quantum 57.0.2 (64-bit), what I post here may change in later versions!).

To do this, you have to launch a new tab, and type "about:config" in the address bar. Then, search for the entry:

dom.w3c_pointer_events.enabled

and change the status of this boolean value to true.

Unless you do this, Firefox won't, as yet, handle pointer events at all. This will probably change in the future, but for the moment, be aware that pointer event handling is likely to be a minefield if you're interested in cross-browser compatibility. For example, the latest version of Chrome running on my machine, namely Version 63.0.3239.84 (Official Build) (64-bit), handles pointer events without having to dive in and reconfigure the browser, but Firefox caused me no end of headaches until I discovered the above config issue, and similar woes are likely to appear on other browsers as well.

Just to compound the issue, the Windows version of Firefox allows you to enable pointer events, but they are not supported as yet at all on the Firefox Mobile for Android version of the browser. So the same browser is likely to behave differently when one changes platform, just to add to your coding nightmares.

I'm not familiar with Safari or Opera, but users of those browsers are strongly advised to check whether or not similar support issues apply when using pointer events!

As a consequence, it won't matter whether you're trying to handle pointer events natively, or via a framework such as Angular, if the browser doesn't enable pointer events from the get-go. I wasted several hours on this issue, and thought it would be a good idea to spare others the same frustration.

Of course, this will not solve the problem of your end users not knowing this, and your app failing on their systems when they try to run it without configuring their browsers to do so. Or, worse still, your app failing because their browsers don't support pointer events at all (e.g., Firefox Mobile for Android I cited above). End users expect apps to run out of the box, regardless of their hardware & browser choices, except that to make this happen, you currently have nasty hurdles to negotiate. One of these being that touch event support is also hidden behind a config flag in Firefox, so you can't even guarantee that falling back on separate touch events in case pointer events are not supported, will save your app from failure.

At the moment, the only major browser that maintains some consistency across platforms in this regard is Chrome. Code I've written using pointer events works both on a desktop machine and a tablet when I fire up Chrome, but I'm now aware that Firefox is going to present me with headaches on its own, when I try running the code on the tablet.

There are probably other issues lurking in addition to the above waiting for you (especially if you're using the new CSS pointer event features as well!) but they're properly reserved for elsewhere.

Answer 2

Pointer events offer a new way to handle mouse and touch events with one interface. Support for pointer events is currently still rather sparse. Currently, IE11 and Edge have direct support, IE10 with prefix. FF and Chrome (>=53) are actively developing it and have it hidden behind flags (See: chrome://flags/#enable-pointer-events ). From Safari there are no public signals so far.

There is no way to activate or deactivate it for your users. Either a browser supports or it does not.

window.navigator.pointerEnabled is the deprecated way to check if the browser supports it. The recommended way is to check if window.PointerEvent is defined.

There is a polyfill, to support FF, CH, IE10 and Safari.