diff --git a/examples/overlay.js b/examples/overlay.js index 1e0d21fd19..62f85230e3 100644 --- a/examples/overlay.js +++ b/examples/overlay.js @@ -36,13 +36,15 @@ map.addOverlay(marker); // Vienna label var vienna = new ol.Overlay({ position: pos, - element: document.getElementById('vienna') + element: document.getElementById('vienna'), + stopEvent: true }); map.addOverlay(vienna); // Popup showing the position the user clicked var popup = new ol.Overlay({ - element: document.getElementById('popup') + element: document.getElementById('popup'), + stopEvent: true }); map.addOverlay(popup); diff --git a/examples/popup.js b/examples/popup.js index 944b5b8b8b..5e012f07f9 100644 --- a/examples/popup.js +++ b/examples/popup.js @@ -31,7 +31,8 @@ closer.onclick = function() { * Create an overlay to anchor the popup to the map. */ var overlay = new ol.Overlay({ - element: container + element: container, + stopEvent: true }); diff --git a/src/objectliterals.jsdoc b/src/objectliterals.jsdoc index 61aa67d1e7..f7f289dc34 100644 --- a/src/objectliterals.jsdoc +++ b/src/objectliterals.jsdoc @@ -72,6 +72,8 @@ * @property {ol.Coordinate|undefined} position The overlay position in map * projection. * @property {ol.OverlayPositioning|undefined} positioning Positioning. + * @property {boolean|undefined} stopEvent Whether event propagation to the map + * should be stopped. Default is `false`. */ /** diff --git a/src/ol/control/control.js b/src/ol/control/control.js index 471236b048..fdf721e00c 100644 --- a/src/ol/control/control.js +++ b/src/ol/control/control.js @@ -93,7 +93,7 @@ ol.control.Control.prototype.setMap = function(map) { this.map_ = map; if (!goog.isNull(this.map_)) { var target = goog.isDef(this.target_) ? - this.target_ : map.getOverlayContainer(); + this.target_ : map.getOverlayContainerStopEvent(); goog.dom.appendChild(target, this.element); if (this.handleMapPostrender !== goog.nullFunction) { this.listenerKeys.push(goog.events.listen(map, diff --git a/src/ol/map.js b/src/ol/map.js index 664d0c8550..81601ffb9b 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -225,13 +225,21 @@ ol.Map = function(options) { */ this.overlayContainer_ = goog.dom.createDom(goog.dom.TagName.DIV, 'ol-overlaycontainer'); - goog.events.listen(this.overlayContainer_, [ + goog.dom.appendChild(this.viewport_, this.overlayContainer_); + + /** + * @private + * @type {Element} + */ + this.overlayContainerStopEvent_ = goog.dom.createDom(goog.dom.TagName.DIV, + 'ol-overlaycontainer-stopevent'); + goog.events.listen(this.overlayContainerStopEvent_, [ goog.events.EventType.CLICK, goog.events.EventType.DBLCLICK, ol.BrowserFeature.HAS_TOUCH ? goog.events.EventType.TOUCHSTART : goog.events.EventType.MOUSEDOWN ], goog.events.Event.stopPropagation); - goog.dom.appendChild(this.viewport_, this.overlayContainer_); + goog.dom.appendChild(this.viewport_, this.overlayContainerStopEvent_); var mapBrowserEventHandler = new ol.MapBrowserEventHandler(this); goog.events.listen(mapBrowserEventHandler, @@ -591,14 +599,24 @@ ol.Map.prototype.getViewport = function() { /** * @return {Element} The map's overlay container. Elements added to this - * container won't let mousedown and touchstart events through to the map, so - * clicks and gestures on an overlay don't trigger any MapBrowserEvent. + * container will let mousedown and touchstart events through to the map, so + * clicks and gestures on an overlay will trigger MapBrowserEvent events. */ ol.Map.prototype.getOverlayContainer = function() { return this.overlayContainer_; }; +/** + * @return {Element} The map's overlay container. Elements added to this + * container won't let mousedown and touchstart events through to the map, so + * clicks and gestures on an overlay don't trigger any MapBrowserEvent. + */ +ol.Map.prototype.getOverlayContainerStopEvent = function() { + return this.overlayContainerStopEvent_; +}; + + /** * @param {ol.Tile} tile Tile. * @param {string} tileSourceKey Tile source key. diff --git a/src/ol/overlay.js b/src/ol/overlay.js index 01095fead5..07dd6615e6 100644 --- a/src/ol/overlay.js +++ b/src/ol/overlay.js @@ -60,6 +60,12 @@ ol.Overlay = function(options) { goog.base(this); + /** + * @private + * @type {boolean} + */ + this.stopEvent_ = goog.isDef(options.stopEvent) ? options.stopEvent : false; + /** * @private * @type {Element} @@ -202,8 +208,10 @@ ol.Overlay.prototype.handleMapChanged = function() { this.mapPostrenderListenerKey_ = goog.events.listen(map, ol.MapEventType.POSTRENDER, this.handleMapPostrender, false, this); this.updatePixelPosition_(); - goog.dom.append( - /** @type {!Node} */ (map.getOverlayContainer()), this.element_); + goog.dom.append(/** @type {!Node} */ ( + this.stopEvent_ ? map.getOverlayContainerStopEvent() : + map.getOverlayContainer()), + this.element_); } };