Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rag

Draggable onClick mostly not passing pointer position on Android stock browser

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 post
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 post
Share on other sites

I can imagine that, yeah. Just tried with allowNativeTouchScrolling:false, exactly the same behaviour.

Link to post
Share on other sites

I just figured out that reading the values out of e.changedTouches works. I did expect GSAP to normalize this though, but maybe I was wrong, is this out of scope or just a bug?

Link to post
Share on other sites

Look at pointerX and pointerY in the docs. That should give you the correct values.

 

function onClick() {
  var x = this.pointerX;
  var y = this.pointerY;
  
  ...
}

 

  • Like 4
Link to post
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 post
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.

×