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

纵饮孤独 提交于 2020-01-14 06:50:10

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!