0

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

我准备了一个小提琴来解释这种行为： 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.

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

4

1 回答 1

1

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

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

于 2013-08-07T21:34:56.283 回答