diff --git a/examples/BaseLayers.html b/examples/BaseLayers.html index 6428110c7a..be92269b42 100644 --- a/examples/BaseLayers.html +++ b/examples/BaseLayers.html @@ -4,7 +4,7 @@ @@ -22,6 +22,15 @@ map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToMaxExtent(); + + } + + function bar(e) { + alert("body"); + } + function foo(e) { + alert("yo"); + return true; } function changer() { @@ -70,9 +79,10 @@ function mousedown(evt) { if (popup == null) { popup = feature.createPopup(); + popup.setContentHTML("click me"); popup.setBackgroundColor("yellow"); popup.setOpacity(0.7); - popup.events.register("mousedown", popup, onPopupMouseDown); +// popup.events.register("mousedown", popup, onPopupMouseDown); markers.map.addPopup(popup); } else { markers.map.removePopup(popup); @@ -112,12 +122,14 @@
-
click to add Popup to map
+
click to add Popup to map
click to add a Marker with an AnchoredBubble popup
click to modify popup's attributes
click to remove the popup from map
click to remove the markers layer
-
marker.onscreen()?
-
click to destroy the popup from map
+
marker.onscreen()?
+
+ click me +
diff --git a/lib/OpenLayers/Popup.js b/lib/OpenLayers/Popup.js index 9afeb8a761..3c525be786 100644 --- a/lib/OpenLayers/Popup.js +++ b/lib/OpenLayers/Popup.js @@ -75,7 +75,7 @@ OpenLayers.Popup.prototype = { this.div = OpenLayers.Util.createDiv(this.id, null, null, null, null, null, "hidden"); - this.events = new OpenLayers.Events(this, this.div, null); + this.registerEvents(); }, /** @@ -231,5 +231,86 @@ OpenLayers.Popup.prototype = { } }, + + /** Do this in a separate function so that subclasses can + * choose to override it if they wish to deal differently + * with mouse events + * + * Note in the following handler functions that some special + * care is needed to deal correctly with mousing and popups. + * + * Because the user might select the zoom-rectangle option and + * then drag it over a popup, we need a safe way to allow the + * mousemove and mouseup events to pass through the popup when + * they are initiated from outside. + * + * Otherwise, we want to essentially kill the event propagation + * for all other events, though we have to do so carefully, + * without disabling basic html functionality, like clicking on + * hyperlinks or drag-selecting text. + */ + registerEvents:function() { + Event.observe(this.div, "mousedown", + this.onmousedown.bindAsEventListener(this)); + Event.observe(this.div, "mousemove", + this.onmousemove.bindAsEventListener(this)); + Event.observe(this.div, "mouseup", + this.onmouseup.bindAsEventListener(this)); + Event.observe(this.div, "click", + OpenLayers.Util.safeStopPropagation); + Event.observe(this.div, "mouseout", + this.onmouseout.bindAsEventListener(this)); + Event.observe(this.div, "dblclick", + OpenLayers.Util.safeStopPropagation); + }, + + /** When mouse goes down within the popup, make a note of + * it locally, and then do not propagate the mousedown + * (but do so safely so that user can select text inside) + * + * @param {Event} evt + */ + onmousedown: function (evt) { + this.mousedown = true; + OpenLayers.Util.safeStopPropagation(evt); + }, + + /** If the drag was started within the popup, then + * do not propagate the mousemove (but do so safely + * so that user can select text inside) + * + * @param {Event} evt + */ + onmousemove: function (evt) { + if (this.mousedown) { + OpenLayers.Util.safeStopPropagation(evt); + } + }, + + /** When mouse comes up within the popup, after going down + * in it, reset the flag, and then (once again) do not + * propagate the event, but do so safely so that user can + * select text inside + * + * @param {Event} evt + */ + onmouseup: function (evt) { + if (this.mousedown) { + this.mousedown = false; + OpenLayers.Util.safeStopPropagation(evt); + } + }, + + /** When mouse goes out of the popup set the flag to false so that + * if they let go and then drag back in, we won't be confused. + * + * @param {Event} evt + * + * @type Boolean + */ + onmouseout: function (evt) { + this.mousedown = false; + }, + CLASS_NAME: "OpenLayers.Popup" }; diff --git a/lib/OpenLayers/Util.js b/lib/OpenLayers/Util.js index 76ebc80e2a..8a6dac4f5a 100644 --- a/lib/OpenLayers/Util.js +++ b/lib/OpenLayers/Util.js @@ -516,3 +516,16 @@ OpenLayers.Util.getResolutionFromScale = function (scale, units) { * OpenLayers.DOTS_PER_INCH); return resolution; }; + +/** Safely stop the propagation of an event *without* preventing + * the default browser action from occurring. + * + * @param {Event} evt + */ +OpenLayers.Util.safeStopPropagation = function(evt) { + if (evt.stopPropagation) { + evt.stopPropagation(); + } + evt.returnValue = false; + evt.cancelBubble = true; +};