我已经为此努力了 2 天,现在我需要一些关于如何追查这个问题根源的建议。希望有人(您,也许正在阅读此书?)遇到过类似的问题,您可以提供一些帮助。
我的应用程序有一些可以通过具有该名称的 jQuery UI 小部件拖动的东西。这非常有效,直到我使用 Ember 的路由在应用程序内部导航。当刷新 UI 并重新生成可拖动项目中和周围的东西时,会发生一些事情。
那么,会发生什么?
在 UI 的路由重绘之后,当鼠标指针悬停在应该在其上拖动的图像元素上时,可拖动的 div 最明显不会更新它们的位置。运动也是生涩的,这看起来是由于位置没有更新,直到指针位于可拖动 div 之外。拖动也会卡住,释放鼠标按钮后 div 继续跟随鼠标。
更新
我一直在向 jQueryUI Mouse 添加断点,这是可拖动依赖的鼠标事件处理程序。当它检测到鼠标按下和鼠标向上事件时中断我看到拖动时没有注册向上事件。事实上,单击路由后重新渲染的 div 中的任何位置都不会注册 down 或 up 事件。
我只是不知道我能做些什么来搞乱鼠标听众。
更新 2
我一直在鼠标事件兔子洞中走下去,并想出了以下内容。在 Ember.js 上存在一个与事件相关的已关闭问题,该问题没有冒泡到文档以供 jQuery UI 鼠标捕捉它。所以我在提到的位置放了一些日志行,看看发生了什么。我只登录 mouseDown 事件以避免充斥控制台。
我看到的是,在 Ember 内路由导航之前,整个 Ember 层次结构返回事件的未定义管理器。但是,在路由之后,其中一个视图返回 null ,这会立即停止冒泡。甚至 Ember 应用程序根目录的 ApplicationView 也没有发言权,更不用说文档节点上的 jQuery UI。
不过,原因是返回 null 很奇怪。这是因为它正在检查的视图不在 Ember 内部保留的视图列表中。它显然存在于 DOM 中,但不知何故在某些时候未注册或未注册。
狩猎仍在继续……
我做了什么?
我使 jQuery 可拖动混合而不是“手动”调用它
我遵循了这个 SO question和github 上的相关代码,以使 jQuery UI 以更集成的方式创建和销毁观察者。工作原理与此重构之前完全相同。
我卸载并禁用了应用程序使用的所有其他 javascript 库
我在那里有一些画布绘图的东西,我删除了这些东西进行测试。
我尽可能多地删除了 UI 层次结构
我将 ember 应用程序直接放在主体下方,还使应用程序视图“无标签”以更改和减少错误可拖动内容发生的深度。我什至短路了一个直接连接到应用程序视图出口而不是子视图出口的整个视图级别。
我使部分导航可拖动
我做了一些导航项目,在路由时不刷新,可拖动......它们在路由后继续拖动。
我在另一个 Ember 应用程序中制作了可拖动的东西
在同一个 Rails 项目(相同的 css 和基本 html、javascript)中的另一个 Ember 应用程序中不会出现此问题。我在该应用程序中制作了一些随机按钮和东西,可以像疯了一样拖动和“路由”,它们总是可以继续按应有的方式拖动。某些特定于结构或 UI 层次结构的东西似乎是导致它的原因。
当然,我还记录了许多回调并切换了浏览器
为了确保在删除适当的 UI 元素时正确地拆除事情,我已经记录了跟踪每个日志行的大量事情,以确保它看起来像正确的事情发生。最新的 Safari、Chrome 和 Firefox 也是如此。
为什么要责怪 Ember 和 Draggable?
我有这个原型形式的应用程序作为一个 TangledMessOfJavascript™ 应用程序。它做了所有同样的事情。将 DOM 的一部分替换为导航,使用 Draggable 和相同的基本 UI 层次结构(除了一些 Ember 鼓励的东西)。
JS小提琴怎么样?
即使我在寻求建议,我也真的不想尝试从这个非平凡的应用程序层次结构中生成小提琴。我不是想偷懒。我要花一整天的时间来解决这个问题,部分原因是它是一个工作应用程序,其中包含一些我认为我无法分享的东西,但主要是因为它不是一个微不足道的走投无路的问题我可以做一个简单的测试用例。
我想要什么?
我不是在寻找一个神奇的人来解决这个问题......我很想得到一些关于我如何追踪这个问题的建议。我倾向于一些胭脂事件侦听器或其他一些奇怪的东西。我还没有找到调试这种东西的好方法。