javascript - jQuery 和 OpenLayers 之间的事件监听器冲突

Question

该应用程序是一个 Web map (OpenLayers 2)，可以通过单击某些要素来打开对话框。对话框是用 jQuery-ui 处理的。

错误:在调整对话框大小时，如果用户拖动光标太快，则光标会超过对话框大小的更新速度。通常这需要相当不稳定的 Action ，但由于这个应用程序的封装程度，我猜它会慢一点。

但是 jQuery 和 OpenLayers 之间存在一些事件处理冲突。当光标超过其他任何地方的 div 时，没问题，但如果它在 map 上，则调整大小会停止(同样，如果您松开鼠标，则不会注册停止拖动状态，因此如果您返回到对话框，它会用鼠标调整大小)移动)。

这意味着要展开对话框，你必须故意平稳地移动光标，不能太快，否则就会中断，这显然对用户体验来说太有问题了。

设置一个非常简单的 jsfiddle (http://jsfiddle.net/a6uu5vav/)，只需尝试快速拖动或调整对话框大小即可。可能因计算机/浏览器而异，但在 Chrome 中对我来说可以工作(即不工作)。

原因:jQuery-ui 似乎将与拖动/调整大小相关的事件监听器附加到 document因此，无论鼠标速度超过 div，该功能都应该起作用。然而，OpenLayers 还在它创建的所有内容上放置了大量的事件监听器。它使用 event.stopPropagation()因此，只有目标元素上的监听器会收到通知。

因此，当光标位于 OpenLayers map 上时，它会触发目标的事件监听器，但该事件不会传播到调整大小监听器。同时注释掉stopPropagation()从技术上解决了这个问题，因为 OpenLayers 的嵌套方式以及它如何为所有内容提供事件监听器，这使得将鼠标悬停在 map 上变得非常慢。

我尝试使对话框模式化以测试它确实是冲突的事件监听器。模态修复了调整大小问题，但我们不希望它成为模态。尽管“hacky”解决方案可能是有一个不可见的模式，并随着开始/结束拖动的鼠标向下/向上事件而出现/消失。

我的修复尝试:我进入 jQuery-ui(在 ui.mouse 定义中)修改事件监听器以在捕获时触发(而不是气泡)，因为它们被添加到然后文档将保证被触发。自 jQuery.bind()不支持，我改用老式的 addEventListener() ，为了保持一致性，我还更改了任何相关的 unbind()至removeEventListener() .

现在事情是这样的，如果我只这样做，但仍然设置 onCapture参数 addEventListener()设置为 false 时，它​​的工作方式与之前的工作方式完全一样——像往常一样处理调整大小错误。如果我更改 onCapture对于 mousemove 监听器，将 param 设置为 true (如果我将 mouseup 设置为 true/false 并不重要)，从技术上讲，调整大小问题已得到解决，但现在其他问题变得不稳定。

它可以很好地拖动/调整大小，但是在 mouseup 上，事件监听器似乎没有被删除(因此移动鼠标仍然会拖动或调整对话框的大小)，div 也会无缘无故地移动。 _mouseUp()正在被调用并且事件监听器至少在这些行中被删除，我知道这不是回调引用问题，我已经对此进行了测试。我认为它们已被正确删除，但以某种方式被读取。似乎 jQuery 中有些东西在鼠标松开时必须首先执行并以某种方式重新排列顺序，即使只是那一点也完全摆脱了它。

尝试为此“修补”jQuery-ui 可能是一场失败的游戏(即相对于错误严重性而言，总时间消耗)，但想知道是否还有其他一些想法来尝试解决这个问题。

Answer 1

呃，我感觉自己很傻。我的修复想法确实有效，但是如果将 addEventListener() 的 onCapture 参数设置为 true，则必须将 onCapture 参数设置为removeEventListener() 也设置为 true。

对于原始问题的完整修复，您必须将 jQuery-ui 中 mousemove 和 mouseup 的 bind() 和 unbind() 编辑为 addEventListener() 和 removeEventListener() 都带有 onCapture=true，对于这些定义:

$.ui.mouse._mouseDestroy()、$.ui.mouse._mouseDown() 和 $.ui.mouse._mouseUp()

到目前为止，它似乎对我来说效果很好。