Jump to content
Search Community

chrome touchevents and draggable hittest

andycamp00 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

On Chrome, when a touchevent occurs, the pageX/Y values are set to 0.  This means that hitTest won't work when passing in the touch events...


I'm not sure if this is something easy to handle inside Draggable, but I thought I would post it to see if anyone has any thoughts, and if not at least let others know and show my workaround.  For now I am doing a workaround to make my own point to pass in to Draggable.hitTest(), like so:

// e is my event
var point = e; 
if(e.pageX === 0 && e.pageY === 0 && e.changedTouches) {
  x = e.changedTouches[0].pageX;
  y = e.changedTouches[0].pageY;
  point = {
    left: x,
    right: x+1,
    top: y,
    top: y+1

var hit = Draggable.hitTest(element, point);

This is a related investigation to a thread I started at http://greensock.com/forums/topic/12189-draggablehittest-in-a-scrolled-window/, but seemed like a separate topic, so I started a new thread.

  • Like 1
Link to comment
Share on other sites

It's good that you are finding these problems. I keep coming across websites that won't work right in Chrome when a touch screen is present.


Instead of testing for the pageXY, you could just pass in the touch.

if (e.type === "touchmove" && e.changedTouches) e = e.changedTouches[0];
var hitTest = Draggable.hitTest(element, e);
  • Like 4
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...