This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Jordan Robert Dobson
Posted Dec 31 - Read on Facebook

Video: http://cl.ly/0r2t0g0f0d0Z
Code: http://framer.link/cl.ly/Z8Cr/example.framer.zip

PRO QUESTION: Has anyone ran into this issue and know what to attempt to resolve?

I'm doing TouchStart detection on a layer that fills the entire device screen. From that, while the finger is still down, I display a group of buttons of which I want to detect a TouchMove and TouchEnd to see if they are hit.

This works fine in Framer Studio but once you get it on the device only the initial TouchStart event works and none of the events on the buttons fire.

The only thing I could come up with is that I'm rotating a that of buttons and maybe I need to lock it to 2D. Or that my buttons are too far nested as sub layers.

I'm just not sure why there would be a difference between Studio browser and Safari chromeless standalone browser.

I'll put together a simplified example if needed but it's part of a much larger prototype I can't share.

Just wanted to see if there are any tricks for this initially.

11 Comments

Jordan Robert Dobson

Koen Bok Tisho Georgiev Ed Chao - Any ideas here?

Jordan Robert Dobson

Putting together an example now.

Jordan Robert Dobson

Here is an example of what I am seeing: http://cl.ly/0r2t0g0f0d0Z

Jordan Robert Dobson
Jordan Robert Dobson

I'm trying to determine which is the correct interaction between Studio and iOS browser.

Tisho Georgiev

Studio will use the "mousemove" event, instead of "touchmove" behind the scenes, because you're running Studio on a desktop computer. They're both "correct", but the problem is that the two events aren't completely interchangeable. Here's an important bit from the TouchEvent spec (http://www.w3.org/TR/touch-events/#the-touchmove-event) that explains what you're seeing: "The target of this event must be the same Element on which the touch point started when it was first placed on the surface, even if the touch point has since moved outside the interactive area of the target element." This means that as you move your finger outside the element that triggered the touchmove, the OS will pretend that the event is still firing over the same element. This is why the target of the event isn't changing while you're dragging your finger.

To get around this limitation, you can register just one touchmove handler and then figure out which layer happens to be underneath your finger by hit testing. There's multiple ways to do this, depending on how complex your prototype is. The easiest is to just check if the clientX/clientY of the current touch happen to be within the screenFrame of one of the button layers you have. I'm pretty sure there was even a Util function for this, although I can't remember it off the top of my head. You can also look into the document.elementFromPoint(x, y) function, which will give you the DOM node directly underneath a specific coordinate on the page.

Hope this helps!

Jordan Robert Dobson

Yes it does a ton!I guess I thought it was strange to get the drag detection and then not on mobile.

Jordan Robert Dobson

My main issue is the menu could be rotated in a few different ways (depending on how close the menu is to the screen) so I was having an issue finding it's true X & Y coords... so I was hoping to find a work around on the drag/touch events. I had noticed earlier the w3 page you mentioned... that made me start to think it was hopeless and time to start hit testing. Boooo.

document.elementFromPoint might help... otherwise I probably need to setup some state tracker with a collection of potential distances based on the state. This is so much easier in iOS.

I wonder how well does Safari handle the draggable property? Maybe there are some useful events there.

Thanks for taking a look Tisho.

Ed Chao

Took a quick look. I agree with Tisho. My approach would not be to try tracking when one event becomes another (or when two events fire simultaneously), that seems unreliable. I would instead check if during my touchMove, event.offsetX and event.offsetY overlap the area of your button wrapper.

Jordan Robert Dobson

It's not the wrapper I'm trying to detect. But how would you detect it when it's rotated horizontal. That's what I'm dealing with since this menu adjusts / rotates based on the x/y position of the touch. I'm not sure elementFromPoint works either. I keep getting the root of Framer element. :/

Jordan Robert Dobson

Thanks for taking a look Ed!

Read the entire post on Facebook