谷歌地图 InfoBubble 中的 jQuery UI 滑块答案

【问题标题】：jQuery UI Slider within google maps InfoBubble谷歌地图 InfoBubble 中的 jQuery UI 滑块
【发布时间】：2013-08-01 06:26:32
【问题描述】：

我正在构建一个自定义 InfoBubble，它包含两个 jQuery UI 滑块来操作一些数据。创建气泡和滑块时我没有遇到任何问题。不幸的是，某处似乎阻止了鼠标事件冒泡到滑块。

我准备了一个 Fiddle 来解释这种行为： JSFiddle

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

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.

有人知道事件在哪里丢失以及如何解决这种情况吗？

【问题讨论】：

标签： jquery jquery-ui google-maps events google-maps-api-3

【解决方案1】：

好的，我花了很多时间来寻找解决方案。但我现在开始工作了！

问题出在 InfoBubble 代码中。所有事件都被阻止在地图上冒泡，显然是为了防止 Ghostclicks 通过气泡。不幸的是，这也阻止了所有其他侦听器正常工作。处理事件的代码 sn-p 位于第 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();
        }
      })
    );
  }
};

现在您可以从数组中删除您想要使用而不会产生太大影响的事件。我决定采取更温和的方法，只允许那些我真正需要让我的滑块（和链接）工作的事件：

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
};

您可以在此处找到一个工作示例：FIDDLE

【讨论】：

我遇到了完全相同的行为，但在我的情况下，它是 Bootstrap 下拉菜单和模式切换...所以感谢您的解决方法。