Jump to content
Search Community

Draggable onClick mostly not passing pointer position on Android stock browser

rag test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

I'm running into a problem where the event data is not passed into the parameter of the draggables onClick. In iOS I'm at least getting pageX as expected, but on Android stock browser (called com.android.browser (37.0.0.0)), the behaviour is weird. Sometimes both values are 0 and screenX, screenY are undefined, sometimes the event is fired twice and the second time all values are correct. If you add 

if (e.pageX === 0 && e.pageY === 0) return;

to the beginning of the onClick handler, you will see that once every couple taps, the alert will come up and the values will be there.

Thanks

See the Pen bYZWqj by anon (@anon) on CodePen

Link to comment
Share on other sites

Hm, I haven't heard of any such problems. I'll need some time to dig into this further, but it's definitely very tricky to accommodate all of the different browser behaviors related to click events in a draggable environment. Nightmarish, actually :) But give me some time and I'll try to figure this out on my android device. Have you tried setting allowNativeTouchScrolling:false? 

  • Like 1
Link to comment
Share on other sites

Yeah, GSAP can't really edit the values of an event object (I'm pretty sure that'd be a security violation in the browser). So Blake is correct - if you want the pointer's position, just use the Draggable's pointerX and pointerY properties. 

 

The reason you're seeing undefined values for clientX, clientY, screenX, screenY, etc. is because on Android touch devices, the event is a TouchEvent which doesn't have those properties - you need to look in the "changedTouches" array. Like:

onClick: function(e) {
  if (e.changedTouches) {
    e = e.changedTouches[0]; //assumes just one touch, though - be careful. 
  }
  ...
}

 

That has nothing to do with Draggable or GSAP - it's the fun way that various browsers deal with this wonderful world of touch, pointer, and mouse events. Microsoft browsers, for example, handle it differently too - a PointerEvent. 

 

This might be helpful: https://developers.google.com/web/fundamentals/design-and-ux/input/touch/

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...