pointerup fired for draggable's onclick in mobile view

[seansly]

loading the codepen and then turning on the mobile view, refresh the page, then click and you should get two events.  I don't think this is intended but maybe I just have it set up wrong.  It doesn't happen outside of mobile view.

 

console:

 

It seems like the double event happens on a phone or when the browsers mobile mode is set to a phone size specifically, responsive wont trigger two events

 

Any advice?

 

See the Pen jOwvmNy by seansly (@seansly) on CodePen

[GreenSock]

Hi @seansly. If I recall correctly, some browsers do fire multiple events like that in order to not break legacy code. Is there a particular reason this behavior is causing problems for you practically-speaking? Do you need help working around that? 

[seansly]

It seems to happen to me on an actual phone too.  What I was trying to get to work was just a zoom in on click, zoom out on second click.  With the multiple events firing it instantly zooms itself out.

 

 

[seansly]

I've updated the codepen with the relevant zoom/drag code. 

[GreenSock]

If I clear out some of your other callbacks and just leave the onClick, it only fires once (as it should) - are you seeing that same behavior? It looks to me like you've got something contaminating things, like why are you calling .enable().update() in the onPress? 

 

After experimenting for a short time, it stopped breaking - I'm not sure if you changed something in the code when I refreshed or what. But I couldn't get it to break after initially noticing the extra callbacks causing the issue (even when I re-enabled them). 

[seansly]

I still get the issue with onClick as the only callback.  It seems to not "break" as often on codepen, but when I run this locally it breaks every time.  If you refresh the page after loading a mobile view, it should break on codepen though.

 

Quote

like why are you calling .enable().update() in the onPress?

I started building this off an old gsap example and from what I can tell, since I technically need to adjust the viewbox window instead of actually dragging something around... the draggable is attached to a proxy element that gives me pointer information and it doesn't work correctly unless I have that .enable().update() in the onPress.  If that's removed you should notice the viewbox jumping around.

 

the gsap reference is here:

See the Pen bGRLpwZ by seansly (@seansly) on CodePen

[GreenSock]

I think I figured out the scenario that was causing the issue for you. It's a long story but we had to put a ton of work into normalizing behavior across all the browsers because they all have different quirks, bugs, and funky behavior and one of those workarounds involved checking to see if a click recently happened. The threshold was 39ms but I was able to measure it at 40 or 44 at times, and that's when it allowed the other one through (it's a synthetic one that works around Firefox/Safari quirks). I just increased that threshold to 99ms and it seems to be working perfectly now. Here's an updated file: https://assets.codepen.io/16327/Draggable3.min.js

 

Better? 

[seansly]

Thanks,

 

Yeah this seems to do the trick.