谷歌地图InfoBubble中的jQuery UI Slider
我正在构建一个自定义InfoBubble，它包含两个jQuery UI滑块来操作一些数据。 我创建了Bubble和Slider没有任何问题。 不幸的是，某处鼠标事件似乎被阻止冒泡到滑块。
我准备了一个小提琴解释行为： 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. 有谁知道事件丢失的地方以及如何解决这种情况？
好的，我花了很多时间来找到解决方案。 但我现在就开始工作了！
问题在于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