问题
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.
回答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?
来源:https://stackoverflow.com/questions/34205328/error-failed-to-execute-dispatchevent-on-eventtarget