Some time ago I experienced a problem where scrolling on touch devices didn't work anymore when my ExtJS 5 App was embedded in an IFrame (see this thread).

I've solved this by overriding some stuff from the Ext framework (see the solution).

One step of the solution was to dispatch a touchmove event to the document itself (the framework prevents default handling of this event):

// ...
touchmove: function(e) {
    window.document.dispatchEvent(e.event);
}
// ...

Even though this solution basically works it has one flaw: Dispatching the event throws an unhandled InvalidStateError on every touchmove event which is obviously quite often:

If I simply put a try/catch around the dispatchEvent statement, scrolling inside the IFrame on touch devices doesn't work anymore as if not calling it at all.

How can I get rid of the error without breaking scrolling again?

Testapp where scrolling works but many unhandled errors occur can be tested here.

Some time ago I experienced a problem where scrolling on touch devices didn't work anymore when my ExtJS 5 App was embedded in an IFrame (see this thread).

I've solved this by overriding some stuff from the Ext framework (see the solution).

One step of the solution was to dispatch a touchmove event to the document itself (the framework prevents default handling of this event):

// ...
touchmove: function(e) {
    window.document.dispatchEvent(e.event);
}
// ...

Even though this solution basically works it has one flaw: Dispatching the event throws an unhandled InvalidStateError on every touchmove event which is obviously quite often:

If I simply put a try/catch around the dispatchEvent statement, scrolling inside the IFrame on touch devices doesn't work anymore as if not calling it at all.

How can I get rid of the error without breaking scrolling again?

Testapp where scrolling works but many unhandled errors occur can be tested here.

• javascript
• iframe
• extjs
• touch
• extjs5

• 1 I think you've misunderstood why this works. I believe the reason it works it because it is throwing the exception and thus stopping the ExtJS's touch handling. I'm getting the same behavior when using throw new Error(); as dispatchEvent, however when I try/catch the dispatchEvent, it does catch but because nothing was throw it stops scrolling. – Alexander O'Mara Commented Dec 14, 2015 at 21:59

1 Answer 1

I found a surprisingly simple solution: You can just bail out of the event handling by returning false in the handler:

touchmove: function(e) {
    return false;
}

This will make the scrolling bubble up to the browser and get handled properly. Are there any other constraints you have to pay attention to?

If you really want to re-dispatch the event, this is the correct way to do so:

window.document.dispatchEvent(
    new old_event.constructor(old_event.type, old_event)
);

See also: How to clone or re-dispatch DOM events?