错误：无法在“EventTarget”上执行“dispatchEvent” [英] Error: Failed to execute 'dispatchEvent' on 'EventTarget'

问题描述

前一段时间，当我的ExtJS 5应用程序嵌入在一个IFrame中时，我遇到了一个问题，即滚动触摸设备不再工作（请参阅

如果我只是尝试/抓住 dispatchEvent 语句，触摸设备上的IFrame内部滚动就不会再像以前一样调用。

/ p>

Testapp在哪里滚动工作，但许多未处理的错误发生可以是这里测试。

解决方案

我发现一个非常简单的解决方案：您可以通过在处理程序中返回 false 来缓解事件处理：

  touchmove：function（e）{
 return false; 
} 
  

这将使滚动窗口到浏览器并正确处理。你有什么其他的限制吗？

如果你真的要重新发送事件，这是正确的方法：

  window.document.dispatchEvent（
 new old_event.constructor（old_event.type，old_event）
）; 
  

另请参见：

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.

解决方案

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?

这篇关于错误：无法在“EventTarget”上执行“dispatchEvent”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！