search

jquery-archive / PEP

Pointer Events Polyfill: a unified event system for the web platform
https://www.w3.org/TR/pointerevents/
Other
1.67k stars 160 forks source link

Make gotpointercapture and lostpointercapture bubble #365

Closed philipp-spiess closed 5 years ago

philipp-spiess commented 6 years ago

While developing https://github.com/facebook/react/pull/12507, I found out that PEP does only emit gotpointercapture and lostpointercapture to the element that requests the capture.

According to the spec, those events should bubble which is also what I'm seeing in all major browsers that implements pointer events. Both events can be listened on from the document which is a requirement for the current implementation in React since we only listen to those elements on the top level.

SpencerLynn commented 6 years ago

@philipp-spiess Did you see this working in another library? And if so, which library was it?

philipp-spiess commented 6 years ago

@SpencerLynn I did not try other libraries but the problem can easily be reproduced in a JSFiddle: https://jsfiddle.net/odkrzgr6/1/

Every browser that natively supports pointer events that I've tested (Chrome, IE11, Edge, Firefox) will emit the gotpointercapture event to both the document and the target element.

However, when trying the example on Safari (where PEP kicks in) gotpointercapture will only be triggered at the target element since it does not bubble.

SpencerLynn commented 6 years ago

Thanks! @philipp-spiess

drcmda commented 5 years ago

@philipp-spiess @SpencerLynn gotpointercapture seems to never fire (in Safari for instance), not on the target or anywhere else. Is this a known regression?

For instance in this example the green thing is supposed to go blue once it gets the capture: https://codesandbox.io/s/o70qjn9295

The capture itself seems to work, but the event is missing.

philipp-spiess commented 5 years ago

@drcmda If I modify your example to listen directly on the node (using element.addEventListener()) the event seem to be fired: https://codesandbox.io/s/olyw3j6qv5

This is exactly the issue that #366 would fix: React will listen for events on the document so it expects this event to bubble which is not happening on Safari with this polyfill unfortunately.

drcmda commented 5 years ago

@philipp-spiess according to this comment https://github.com/jquery/PEP/pull/376#issuecomment-460707183 the PEP repo isn't maintained any longer? Would the react-dom team perhaps host it? It would be huge if we could simply support pointerevents instead of jumping through hoops for touch/mouse. For React and everything else.

Personally i'm getting stuck with a reconciler i am working on which relies on the gotcapture events (https://github.com/drcmda/react-three-fiber/blob/2.0/src/canvas.js#L252-L270). The hacks to get around this are pretty frightening.

drcmda commented 5 years ago

Meanwhile i'm hosting it on the react-spring org with most of the ongoing PR's merged: https://github.com/react-spring/pointer-events-polyfill

I can remove it as well as the npm package if requested, just needed a solution real quick. And it's indeed working.

scottgonzalez commented 5 years ago

@drcmda I can give you admin access to this repo and make you an owner of the npm package if you're interested. Then you can just maintain this repo instead of the fork.

drcmda commented 5 years ago

@scottgonzalez i would love to but i don't think i can bear the responsibility. I am so swamped with work i wouldn't be able to maintain another repo. I just needed this PR so at least React can capture until Safari merges PE, which i hear will be very soon. But if you give me access to this repo, of course i could merge all the PR's real quick and to hell with tests and CI. But i think for this kind of thing - maybe a fork is safer, all bets are off at least. But as you like ...

scottgonzalez commented 5 years ago

@drcmda I've given you admin access. Feel free to do as much or as little work as you'd like. You're also free to change/remove as much of the infrastructure around this project as you'd like.

drcmda commented 5 years ago

@scottgonzalez could you give me npm push access? I have merged the PR's, added a section on the readme explaining how to use the module - and it's good to go.

patrickhlauke commented 5 years ago

@drcmda btw happy to help out if i can with any spec-related things and/or mild bits of scripting...it's just that the whole infrastructure around the tests and npm etc stumped me completely...so i'm glad to see this being taken up/care of.

drcmda commented 5 years ago

@patrickhlauke i would switch them off for a patch release, so we can at least use PE in our environments and perhaps jquery wants to come back to it later to fix infrastructure. But i think there's no point in letting all these bugfixes hang. I heard yesterday that PE are already unlocked in Safaris tech preview, so just a little longer and we are safe, meanwhile this project works good enough with all the bugfixes applied.

patrickhlauke commented 5 years ago

@drcmda agree with turning things off. i personally just don't know how (i'm really outside of my comfort zone with automation things, npm, etc). so, happy for you to do the necessary (or direct me to what needs to be done), as i still think this has some marginal value for projects that want to run things with PE right now, or that need to support (for whatever reason) older environments.

drcmda commented 5 years ago

I can handle the npm publish, no problem. If someone could ping me here once i have npm access i will get right to it.

scottgonzalez commented 5 years ago

@drcmda You're now an owner of the npm package.