javascript - 错误: Failed to execute 'dispatchEvent' on 'EventTarget'

标签 javascript iframe extjs touch extjs5

不久前,我遇到了一个问题,当我的 ExtJS 5 应用程序嵌入到 IFrame 中时,在触摸设备上滚动不再起作用(请参阅 this thread )。

我通过覆盖 Ext 框架中的一些内容解决了这个问题(请参阅 the solution )。

解决方案的一个步骤是向文档本身分派(dispatch)一个 touchmove 事件(框架阻止默认处理此事件):

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

尽管这个解决方案基本上有效,但它有一个缺陷: 调度该事件会在每个 touchmove 事件上引发未处理的 InvalidStateError,这显然很常见:

enter image description here

如果我只是在 dispatchEvent 语句周围放置一个 try/catch,则在触摸设备上的 IFrame 内滚动将不再起作用,就好像根本没有调用它一样。

如何在不再次中断滚动的情况下消除错误?

测试应用程序滚动工作,但发生许多未处理的错误可能是 tested here .

最佳答案

我发现了一个令人惊讶的简单解决方案:您可以通过在处理程序中返回 false 来退出事件处理:

touchmove: function(e) {
    return false;
}

这将使滚动冒泡到浏览器并得到正确处理。还有其他需要注意的限制吗?

如果您确实想重新调度事件,这是正确的方法:

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

另请参阅:How to clone or re-dispatch DOM events?

关于javascript - 错误: Failed to execute 'dispatchEvent' on 'EventTarget' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34205328/

相关文章:

javascript - 在 Angular Gauge Highchart 中显示类别并删除数字

javascript - 如何使用 React.js 编辑元素的文本?

javascript - 如何让 JavaScript 更改 iframe 的 src?

javascript - 用 Javascript 替换 iframe 源 - 我可以使用循环吗?

jquery - 使用 live() 获取加载的 iframe 内容

javascript - forEach 不适用于 ExtReact 存储中的数据项结构

javascript - Three.js:ExtrudeGeometry:为正面和背面设置不同 Material 时出现问题

javascript - 如何找到从矩形的中心到其顶点的 Angular

javascript - 如何在 EXtJS 中动态更改 css 内容

javascript - 无法加载资源: the server responded with a status of 404 (Not Found)