Question

我在Scriptaculous Slider上方的模态对话窗口中显示Multimap。我遇到的问题是，如果您尝试拖动滑块手柄，则此页面上的滑块手柄不会移动。如果我单击滑块轨道，手柄会正确跳转到该点，然后您可以使用手柄正确拖动。

点击手柄成功注册了点击，因为我可以console.log()此时滑块的值。试图通过它的手柄拖动滑块只是记录相同的值并且手柄不会移动。

滑块可以在任何没有多图的页面上正常工作。

页面上没有其他JS框架（只有Prototype和Scriptaculous）。

我真的不确定问题是什么。如果滑块没有注册任何东西，那么这将是有意义的地图以某种方式ontop或窃取click事件。但是点击量显然正在被记录下来。我也不明白为什么点击滑块轨道可以完全解决问题。

有人能指出我正确的方向（使用修复程序或自己调试问题的路径）。

我尝试过的事情：

设置句柄的z-index。
使模态对话框开始可见（因为它隐藏起来 - 我认为它可能与this issue有关，但它没有帮助。）

Answer 1

发现问题。

Scriptaculous Slider和Multimap都以不同的方式定义Array.prototype.indexOf。

解决方案（因为我只想在滑块上设置1个句柄）是编辑slider.js并将调用更改为this.handles.indexOf。

Index: slider.js
===================================================================
--- slider.js   (revision 1)
+++ slider.js   (working copy)
@@ -219,14 +219,14 @@
           this.offsetY = (pointer[1] - offsets[1]);
         } else {
           // find the handle (prevents issues with Safari)
-          while((this.handles.indexOf(handle) == -1) && handle.parentNode) 
+          while((this.handles[0] != handle) && handle.parentNode)
             handle = handle.parentNode;
-            
-          if (this.handles.indexOf(handle)!=-1) {
+
+          if (this.handles[0] == handle) {
             this.activeHandle    = handle;
-            this.activeHandleIdx = this.handles.indexOf(this.activeHandle);
+            this.activeHandleIdx = 0;
             this.updateStyles();
-            
+
             var offsets  = Position.cumulativeOffset(this.activeHandle);
             this.offsetX = (pointer[0] - offsets[0]);
             this.offsetY = (pointer[1] - offsets[1]);

请注意使用此修补程序的任何人：虽然此修复程序会使Scriptaculous Slider和Multimaps可以在同一页面上一起工作，但它会使滑块上只有1个句柄作品。我还没有测试过如果你尝试使用2个或更多句柄会发生什么。

当滑块位于多图上方时，Scriptaculous Slider手柄不会移动

1 个答案: