Overriding touchstart.preventDefault()

Hi all,

I've got single-page js app which contains a construct canvas placed inside a <div>. On MOBILE, once the construct canvas has been initialised, it attaches some events to the document root (such as touchstart and touchend). These bindings cause the normal scrolling ability of the mobile browser to break as the attached bindings call "preventDefault()". Right now I can get around it by editing the c2runtime.js code to check if a global variable "gamePlaying" is true. If not (the game is not visible), it stops the call to preventDefault(). This works, but is super-hacky. Is there an easier way to unbind the "ontouchstart" and "ontouchend" events when the game is not visible? I've tried to suspend the runtime, but this doesn't work as desired.

Thanks in advance for any light you may shed on this challenge.

Run the game in an iframe so it has its own window/document and does not conflict with the rest of the page.

Great idea, thanks Ashley!

That worked brilliantly, thanks again. I had to adjust some code to allow cross-iframe communication with my base js. For anyone following up on this thread, use:

<Inside iFrame>

function calledFromConstruct(_score) { // This is called from Construct using Execute Javascript "calledFromConstruct(score)"

localStorage.setItem("myScore", _score);

window.top.postMessage("myMessage", "*");

}

<Inside wrapper html page>

$(window).on("message", function(e) {

if (e.originalEvent.data=="myMessage") { // Filter out messages from other iframes such as those generated by FB iframe

var theScore = localStorage.getItem("myScore");

// Do something with score

}

});

I saved the game score inside localstorage so both the iframe and the wrapper page have access to it.