Google Maps中的jQuery UI滑块InfoBubble [英] jQuery UI Slider within google maps InfoBubble

问题描述

我正在构建一个自定义的InfoBubble，它持有两个jQuery UI滑块来操纵一些数据。我没有创造泡沫和滑块的问题。不幸的是，一个鼠标事件似乎被阻止冒泡到滑块。

我准备了一个小提琴来解释这个行为：
JSFiddle

要重现错误，请执行以下操作：

  1。点击滑块
 2.将鼠标移到InfoBubble 
之外3.将鼠标左右移动以使用滑块
 4.将鼠标移回信息窗口并看到滑块运动立即停止。有没有人知道事件丢失的地方，以及我如何解决这个问题？
 $ / $ $ $ $ $ $ $ $ 
 
解决方案
好的，我投入了很多时间找到解决方案。但是现在我已经开始工作了！
 
 
 
问题在于InfoBubble代码。所有事件都被阻止冒泡到地图上，显然是为了防止Ghostclicks通过泡泡。不幸的是，这也阻止所有其他听众正常工作。 
处理事件的代码段在808行中找到：
  / ** 
 *添加事件停止传播
 * @private 
 * / 
 InfoBubble.prototype.addEvents_ = function（）{
 //我们要取消所有的事件，所以他们不去map 
 var events = ['mousedown'，'mousemove'，'mouseover'，'mouseout'，'mouseup'，
'mousewheel'，'DOMMouseScroll'，'touchstart'，'touchend' touchmove'，
'dblclick'，'contextmenu'，'click']; 
 
 var bubble = this.bubble_; 
 this.listeners_ = []; 
 for（var i = 0，event; event = events [i]; i ++）{
 this.listeners_.push（
 google.maps.event.addDomListener（bubble，event，function （e）{
 e.cancelBubble = true; 
 if（e.stopPropagation）{
 e.stopPropagation（）; 
} 
}）
 ）; 
} 
}; 
  
现在，您可以从数组中删除事件，您要使用的事件没有太大的影响。我决定采取更柔和的做法，只允许我的滑块（和链接）真正需要的那些事件：
  InfoBubble.prototype.addEvents_ = function（）{
 // bla bla code，see above 
 google.maps.event.addDomListener（bubble，event，function（e）{
 //允许所有的mouseup事件
如果（e.type =='mouseup'）{return;} 
 //允许我的按钮类的点击事件
 if（e.type =='click '& $（e.fromElement）.closest（'。btn'））{return;} 
 //允许来自我的jquery ui滑块的事件
 if（$（e.fromElement ）.is（div [class ^ ='ui-slider  - ']，div [class * ='ui-slider-']））{return;} 
 
 // else：do你要做什么
 e.cancelBubble = true; 
 if（e.stopPropagation）{
 e.stopPropagation（）; 
} 
）; 
 // bla bla code，see above 
}; 
  
您可以在这里找到一个工作示例：   FIDDLE    
 
I'm building a custom InfoBubble that is holding two jQuery UI sliders to manipulate some data. I had no problems creating the Bubble and the Slider. Unfortunately, somewhere a mouse event seems to be prevented from bubbling to the slider.

I prepared a Fiddle to explain the behaviour: 
JSFiddle

To reproduce the error, do the following:
1. Click on the slider knob
2. Move your mouse outside of the InfoBubble
3. Move your mouse to the left and right to use the slider
4. Move your mouse back to the info window and see the slider movement cease immediately.
Does anybody know where the event gets lost and how I could fix this situation?
解决方案
Ok, I invested quite a bit of time to find a solution to this. But I got it working now!

The problem lies within the InfoBubble code. All events are being prevented from bubbling up to the map, apparently to prevent Ghostclicks through the Bubble. Unfortunately this prevents also all other listeners from working properly.
The code snippet handling the events is found on line 808:
/**
 * Add events to stop propagation
 * @private
 */
InfoBubble.prototype.addEvents_ = function() {
  // We want to cancel all the events so they do not go to the map
  var events = ['mousedown', 'mousemove', 'mouseover', 'mouseout', 'mouseup',
      'mousewheel', 'DOMMouseScroll', 'touchstart', 'touchend', 'touchmove',
      'dblclick', 'contextmenu', 'click'];

  var bubble = this.bubble_;
  this.listeners_ = [];
  for (var i = 0, event; event = events[i]; i++) {
    this.listeners_.push(
      google.maps.event.addDomListener(bubble, event, function(e) {
        e.cancelBubble = true;
        if (e.stopPropagation) {
          e.stopPropagation();
        }
      })
    );
  }
};
Now you could just remove the events from the array, that you want to use without much of an impact. I decided to take a softer approach and only allow those events, that I truly needed for my sliders (and links) to work:
InfoBubble.prototype.addEvents_ = function() {
  // bla bla code, see above
      google.maps.event.addDomListener(bubble, event, function(e) {
        // allow all mouseup-events
        if(e.type == 'mouseup') { return; }
        // allow click events from my button classes
        if(e.type == 'click' && $(e.fromElement).closest('.btn') ) { return; }
        // allow events that come from my jquery ui slider
        if( $(e.fromElement).is("div[class^='ui-slider-'],div[class*=' ui-slider-']") ) { return; }

        // else: do what you have to do
        e.cancelBubble = true;
        if (e.stopPropagation) {
          e.stopPropagation();
        }
    );
  // bla bla code, see above
};
You can find a working example here: FIDDLE

                        
这篇关于Google Maps中的jQuery UI滑块InfoBubble的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！