React: Support Pointer events specification

[plievone]

What is your approach to IE10 touch events?

Hammer.js checks window.navigator.pointerEnabled || window.navigator.msPointerEnabled and then switches touchstart, touchmove, touchend touchcancel to pointerdown MSPointerDown, pointermove MSPointerMove, pointerup pointercancel MSPointerUp MSPointerCancel.

[shauntrennery]

Any update on this?

[sophiebits]

Maybe we should polyfill pointer events always, like in http://blogs.msdn.com/b/eternalcoding/archive/2013/01/16/hand-js-a-polyfill-for-supporting-pointer-events-on-every-browser.aspx. Having pointer events always available seems way better than having to manage touch and ouse events by hand.

[jessep]

I would love if they were enabled with a polyfill by default :) Seems like
a genuine barrier to creating responsive components/apps.

On Fri, Nov 22, 2013 at 8:45 AM, Ben Alpert [email protected]:

Maybe we should polyfill pointer events always, like in
http://blogs.msdn.com/b/eternalcoding/archive/2013/01/16/hand-js-a-polyfill-for-supporting-pointer-events-on-every-browser.aspx.
Having pointer events always available seems way better than having to
manage touch and ouse events by hand.

—
Reply to this email directly or view it on GitHubhttps://github.com/facebook/react/issues/499#issuecomment-29087969
.

[petehunt]

There are issues with listening to touch events always... I forget what they are though. @zpao knows. But we should probably make this work with SimpleEventPlugin and initializeTouchEvents()

[sophiebits]

I think we can get rid of initializeTouchEvents if we attach the listeners to the elements which have handlers attached instead of at the document level.

[plievone]

Related: #184

[thauburger]

+1

It would be cool to have support for pointer events, particularly regarding responsiveness in modern IE / IE mobile browsers. I hate having to add proprietary ms viewport tags / css properties to get rid of the infamous 300ms click delay, for instance.

Any update here?

[chenglou]

@thauburger edit: there's an internal diff coming up for making onClick work without the delay.

[sophiebits]

@chenglou Doesn't work in IE10 right now though, I believe.

[thauburger]

@chenglou @spicyj thanks for the update!

[plievone]

@spicyj For IE10 one can disable click delay with something like

a, input, button {
    -ms-touch-action: none !important;
}

(suggested by fastclick.js)

[syranide]

I'm compiling a PR based on http://www.w3.org/TR/pointerevents/ and will put it up shortly.

[steida]

Please allow touch-action attribute. http://www.polymer-project.org/platform/pointer-events.html

[iamdustan]

Yes yes. https://github.com/Polymer/PointerEvents ftw.

_It’s the future!_

[zoomclub]

Having to use mouse and touch events separately is not in keeping with the otherwise forward thinking React framework. Pointer Events are the future, what is the status of this issue?

[steida]

Actually, PointerEvents and PointerGestures polyfills were deprecated recently in favor of https://github.com/Polymer/polymer-gestures https://groups.google.com/forum/#!topic/polymer-dev/ba4aDyOozm8 I believe the problem is shadow DOM which I am not using anyway.

[steida]

For now, I am hapilly using PointerEvents helper component: https://gist.github.com/steida/932d5309f6012b3eeb4e

[syranide]

@steida We don't care about the development of Polymer though and AFAIK PointerEvents are still in the W3 HTML5 TR?

[syranide]

@zoomclub Shout in #1389 if you want it to happen faster :)

[iamdustan]

fwiw, PointerEvents seem to be falling out of favor with browser devs.

https://docs.google.com/document/d/1Bfcw9iR1SF2VYCXBegbqhbqWMim-ZEd7_iaQODE-RPY/

[syranide]

@iamdustan Very interesting, but it seems very weird if there will be nothing to replace it.

[iamdustan]

@syranide Agreed. It seems to me like browser engineers are experimenting just like front end engineers are. Not sure if you read the entirety of that document, but it seemed to make mention that there is the possibility of the good parts of pointer events someday migrating into touch events.

[syranide]

@iamdustan Just finished reading it through, very interesting stuff. My takeaway though is that most of the discussion isn't primarily about any short-comings of PointerEvents, but whether or not browsers really should provide such "sugar".

So even if they do end up abandoning it, it may still make sense to provide _a way_ to have it in React (because the demand is real), which naturally leads to the idea of plugging in any event sugar. But it could never benefit third-party components and I feel that many (including me) would be afraid to commit to "any one" community event sugar, they tend to be abandoned on a daily basis.

An interesting alternative (perhaps) after reading through that discussion, what if one could specify event emulation modes per DOM-node, i.e, <div onMouseDown={...} touchEventsAs="mouse" /> and it would emulate mouse-events from touch-events. There are probably flaws I haven't thought of, but it's possible that everyone could benefit and it (hopefully) wouldn't be a big strain on React.

But we'll see where it goes.

[iamdustan]

@syranide how would you imagine the react emulation mode rectify itself with the browser emulated events? (E.g. the iOS touch event cascade: http://www.quirksmode.org/blog/archives/2014/02/the_ios_event_c.html)

[syranide]

@iamdustan I really have no idea, I have thankfully been able to stay away from touch events so far. But I imagine event.preventDefault() in touchend would prevent the cascade, but there are definitely big questionmarks as can be seen in some other issues.

[deepsweet]

Pointer Events now in Firefox Nightly

[jfahrenkrug]

If I understand this correctly, we can only simulate a pointerDown event when we have first-class pointer event support in React, correct? I've looked at the source code of https://github.com/zilverline/react-tap-event-plugin/ (and this issue https://github.com/zilverline/react-tap-event-plugin/issues/10) and am very impressed with the sophistication of the React event system. No news on pointerEvent support as of yet, though?

[aaronshaf]

Any update on this? I am adding/removing pointer event listeners for in the component lifecycle.

[martpie]

Same question here, I'd love to see it implemented soon.

[klimashkin]

Really needed since pointer events are in Chrome now and going to be shipped in FF

[MilllerTime]

I wrote a component that allows declarative pointer event binding, and has been working for me as an easy substitute until React officially supports them.

Update: <Pointable /> now lives in its own repo and is on npm:
https://www.npmjs.com/package/react-pointable

While it's great Chrome and FF are shipping pointer events, Safari is my biggest worry. To that end, this component plays well with the official pointer events polyfill project for wide support.

[chaffeqa]

I would love to see this... the parody between onPointerEnter and onMouseEnter is sooooo useful for user experiance

[anthonybarsotti]

@spicyj Is this issue still something we'd want to implement?

[philipp-spiess]

If we don't provide a polyfill and just add support for it in the SimpleEventPlugin, the implementation should be relatively straight-forward, right?

This will still allow people to use the popular polyfill if they need pointer events on different platforms. React would simply handle this as another type of native events (similar to SyntheticMouseEvent and SyntheticTouchEvent). If this is something you want to implement I'd love to give it a shot 👍

[MilllerTime]

@philipp-spiess Even if pointer event support is added to React, integrating with PEP will still require manually setting/removing the touch-action attribute since it's a non-standard workaround required by PEP. Supporting Safari/iOS seems fairly important and touch-action would still be a pain point.

That being said, if pointer events are added to React, I'll update Pointable so it handles touch-action and allows React to do the rest.

[philipp-spiess]

@MilllerTime Thank you for your input! I agree that the touch-action API is inconvenient. My idea was to simply make React understand pointer events and pool them like touch or mouse events.

Since support for Safari and iOS is vital, we could write a small guide somewhere as well where we explain how a user can set this up with the polyfill. Either by using your package or adding the touch-action property manually.

If a more out-of-the-box support for this polyfill is desired, we could also whitelist the touch-action property on HTML elements here.

[caub]

so React still doesn't support

<div onPointerDown={console.log}>foo</div>

the authors don't want it or they are open to a PR?

[elijahdorman]

Firefox 59 just shipped with support for pointer events enabled. There's now mainstream support for every browser except Safari.

[chaffeqa]

sounds about right 🙄

[jquense]

If anyone would like to add support it's pretty straightforward to add native events. Take a look at SimpleEventPlugin and how the other native events are supported.

There is a question about whether React should polyfill the behave for old browsers, but I think it'll be safe to start with just allowing the native events if anyone wants to give it a shot