How do I Handle Touch events in DIV over C2 canvas

Hi all,

Please note, this is more about HTML/CSS/JavaScript.

Currently busy with a big project, where we have a popup (DIV) over the C2 canvas. The popup works perfectly on desktops, but on mobile you cant scroll the content of the popup....

If I comment out the cr_createRuntime("c2canvas"); statement in the exported index.html file. The touch events works fine.

Seems like C2 is handling the touch events, and preventing it or stopping it from propagation to other HTML elements.

Does anyone know how to solve this?

I'm not an expert by far on Javascript, but I would suggest by design, that C2 is limiting this interaction - mostly due to the nature of it being "in focus" on any given page. This is to stop things like spacebar making the page scroll down, or other hotkeys interrupting the game/app/whatever.

I'm probably wrong - but I'm going to go with "it probably can't be done"... though Ashley might have some kind of ninja workaround.

I do find it curious though how you mention it works on desktop but not mobile... so perhaps it is indeed possible. Buggered if I know how to do it though!

~Sol

I think if your project has the touch plugin it listens for and prevents default on all touch events. Otherwise things like page selection, scrolling and pinch-to-zoom happen, which is never wanted in a C2 game.

Unfortunately this does block scrolling to such as in your case. TBH the runtime isn't really designed for that, it basically takes over the whole page. I can think of 2 possible workarounds:

• add touch event listeners with capture, so you get them first, and stop propagation on them so the runtime doesn't see them - but then none of the C2 game's touch events will work
• put the game in an iframe and float any content you want to pop over it in the parent document. Since it's a whole other document you're in full control of touch events.