Search code examples
javascriptiframeextjstouchextjs5

Error: Failed to execute 'dispatchEvent' on 'EventTarget'

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:

enter image description here

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.

Solution

  • 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?