Don't let button controls interfer with handlers.

This change involves removal of the map's eventsDiv and introduces an OpenLayers.Events.buttonclick component that adds a buttonclick event which makes sure that only events that are not related to clicking a button propagate. This allows button controls to be on the map's viewPortDiv again.

lib/OpenLayers.js

@@ -111,6 +111,7 @@
                 "Rico/Corner.js",
                 "Rico/Color.js",
                 "OpenLayers/Events.js",
+                "OpenLayers/Events/buttonclick.js",
                 "OpenLayers/Request.js",
                 "OpenLayers/Request/XMLHttpRequest.js",
                 "OpenLayers/Projection.js",

lib/OpenLayers/Control/LayerSwitcher.js

@@ -7,6 +7,7 @@
  * @requires OpenLayers/Control.js
  * @requires OpenLayers/Lang.js
  * @requires OpenLayers/Console.js
+ * @requires OpenLayers/Events/buttonclick.js
  */
 
 /**
@@ -130,20 +131,16 @@ OpenLayers.Control.LayerSwitcher =
      */    
     destroy: function() {
         
-        OpenLayers.Event.stopObservingElement(this.div);
-
-        OpenLayers.Event.stopObservingElement(this.minimizeDiv);
-        OpenLayers.Event.stopObservingElement(this.maximizeDiv);
-
         //clear out layers info and unregister their events 
         this.clearLayersArray("base");
         this.clearLayersArray("data");
         
         this.map.events.un({
-            "addlayer": this.redraw,
+            buttonclick: this.onButtonClick,
-            "changelayer": this.redraw,
+            addlayer: this.redraw,
-            "removelayer": this.redraw,
+            changelayer: this.redraw,
-            "changebaselayer": this.redraw,
+            removelayer: this.redraw,
+            changebaselayer: this.redraw,
             scope: this
         });
         
@@ -160,10 +157,11 @@ OpenLayers.Control.LayerSwitcher =
         OpenLayers.Control.prototype.setMap.apply(this, arguments);
 
         this.map.events.on({
-            "addlayer": this.redraw,
+            buttonclick: this.onButtonClick,
-            "changelayer": this.redraw,
+            addlayer: this.redraw,
-            "removelayer": this.redraw,
+            changelayer: this.redraw,
-            "changebaselayer": this.redraw,
+            removelayer: this.redraw,
+            changebaselayer: this.redraw,
             scope: this
         });
     },
@@ -192,6 +190,20 @@ OpenLayers.Control.LayerSwitcher =
         return this.div;
     },
 
+    /**
+     * Method: onButtonClick
+     *
+     * Parameters:
+     * evt - {Event}
+     */
+    onButtonClick: function(evt) {
+        if (evt.button === this.minimizeDiv) {
+            this.minimizeControl();
+        } else if (evt.button === this.maximizeDiv) {
+            this.maximizeControl();
+        };
+    },
+
     /** 
      * Method: clearLayersArray
      * User specifies either "base" or "data". we then clear all the
@@ -317,10 +329,11 @@ OpenLayers.Control.LayerSwitcher =
                     'layer': layer,
                     'layerSwitcher': this
                 };
-                OpenLayers.Event.observe(inputElem, "mouseup", 
+                var onInputClick = OpenLayers.Function.bindAsEventListener(
-                    OpenLayers.Function.bindAsEventListener(this.onInputClick,
+                    this.onInputClick, context
-                                                            context)
                 );
+                OpenLayers.Event.observe(inputElem, "mousedown", onInputClick);
+                OpenLayers.Event.observe(inputElem, "touchstart", onInputClick);
                 
                 // create span
                 var labelSpan = document.createElement("span");
@@ -331,10 +344,8 @@ OpenLayers.Control.LayerSwitcher =
                 labelSpan.innerHTML = layer.name;
                 labelSpan.style.verticalAlign = (baseLayer) ? "bottom" 
                                                             : "baseline";
-                OpenLayers.Event.observe(labelSpan, "click", 
+                OpenLayers.Event.observe(labelSpan, "click", onInputClick);
-                    OpenLayers.Function.bindAsEventListener(this.onInputClick,
+                OpenLayers.Event.observe(labelSpan, "touchstart", onInputClick);
-                                                            context)
-                );
                 // create line break
                 var br = document.createElement("br");
     
@@ -500,16 +511,6 @@ OpenLayers.Control.LayerSwitcher =
      */
     loadContents: function() {
 
-        //configure main div
-
-        OpenLayers.Event.observe(this.div, "mouseup", 
-            OpenLayers.Function.bindAsEventListener(this.mouseUp, this));
-        OpenLayers.Event.observe(this.div, "click",
-                      this.ignoreEvent);
-        OpenLayers.Event.observe(this.div, "mousedown",
-            OpenLayers.Function.bindAsEventListener(this.mouseDown, this));
-        OpenLayers.Event.observe(this.div, "dblclick", this.ignoreEvent);
-
         // layers list div        
         this.layersDiv = document.createElement("div");
         this.layersDiv.id = this.id + "_layersDiv";
@@ -561,11 +562,8 @@ OpenLayers.Control.LayerSwitcher =
                                     null, 
                                     img, 
                                     "absolute");
-        OpenLayers.Element.addClass(this.maximizeDiv, "maximizeDiv");
+        OpenLayers.Element.addClass(this.maximizeDiv, "maximizeDiv olButton");
         this.maximizeDiv.style.display = "none";
-        OpenLayers.Event.observe(this.maximizeDiv, "click", 
-            OpenLayers.Function.bindAsEventListener(this.maximizeControl, this)
-        );
         
         this.div.appendChild(this.maximizeDiv);
 
@@ -577,53 +575,11 @@ OpenLayers.Control.LayerSwitcher =
                                     null, 
                                     img, 
                                     "absolute");
-        OpenLayers.Element.addClass(this.minimizeDiv, "minimizeDiv");
+        OpenLayers.Element.addClass(this.minimizeDiv, "minimizeDiv olButton");
         this.minimizeDiv.style.display = "none";
-        OpenLayers.Event.observe(this.minimizeDiv, "click", 
-            OpenLayers.Function.bindAsEventListener(this.minimizeControl, this)
-        );
 
         this.div.appendChild(this.minimizeDiv);
     },
     
-    /** 
-     * Method: ignoreEvent
-     * 
-     * Parameters:
-     * evt - {Event} 
-     */
-    ignoreEvent: function(evt) {
-        OpenLayers.Event.stop(evt);
-    },
-
-    /** 
-     * Method: mouseDown
-     * Register a local 'mouseDown' flag so that we'll know whether or not
-     *     to ignore a mouseUp event
-     * 
-     * Parameters:
-     * evt - {Event}
-     */
-    mouseDown: function(evt) {
-        this.isMouseDown = true;
-        this.ignoreEvent(evt);
-    },
-
-    /** 
-     * Method: mouseUp
-     * If the 'isMouseDown' flag has been set, that means that the drag was 
-     *     started from within the LayerSwitcher control, and thus we can 
-     *     ignore the mouseup. Otherwise, let the Event continue.
-     *  
-     * Parameters:
-     * evt - {Event} 
-     */
-    mouseUp: function(evt) {
-        if (this.isMouseDown) {
-            this.isMouseDown = false;
-            this.ignoreEvent(evt);
-        }
-    },
-
     CLASS_NAME: "OpenLayers.Control.LayerSwitcher"
 });

lib/OpenLayers/Control/OverviewMap.js

@@ -6,7 +6,7 @@
 /** 
  * @requires OpenLayers/Control.js
  * @requires OpenLayers/BaseTypes.js
- * @requires OpenLayers/Events.js
+ * @requires OpenLayers/Events/buttonclick.js
  */
 
 /**
@@ -157,7 +157,7 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
             this.handlers.drag.destroy();
         }
 
-        this.ovmap && this.ovmap.eventsDiv.removeChild(this.extentRectangle);
+        this.ovmap && this.ovmap.viewPortDiv.removeChild(this.extentRectangle);
         this.extentRectangle = null;
 
         if (this.rectEvents) {
@@ -177,20 +177,19 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
         this.element = null;
 
         if (this.maximizeDiv) {
-            OpenLayers.Event.stopObservingElement(this.maximizeDiv);
             this.div.removeChild(this.maximizeDiv);
             this.maximizeDiv = null;
         }
         
         if (this.minimizeDiv) {
-            OpenLayers.Event.stopObservingElement(this.minimizeDiv);
             this.div.removeChild(this.minimizeDiv);
             this.minimizeDiv = null;
         }
 
         this.map.events.un({
-            "moveend": this.update,
+            buttonclick: this.onButtonClick,
-            "changebaselayer": this.baseLayerDraw,
+            moveend: this.update,
+            changebaselayer: this.baseLayerDraw,
             scope: this
         });
 
@@ -247,11 +246,7 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
                                         img, 
                                         'absolute');
             this.maximizeDiv.style.display = 'none';
-            this.maximizeDiv.className = this.displayClass + 'MaximizeButton';
+            this.maximizeDiv.className = this.displayClass + 'MaximizeButton olButton';
-            OpenLayers.Event.observe(this.maximizeDiv, 'click', 
-                OpenLayers.Function.bindAsEventListener(this.maximizeControl,
-                                                        this)
-            );
             this.div.appendChild(this.maximizeDiv);
     
             // minimize button div
@@ -263,26 +258,8 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
                                         img, 
                                         'absolute');
             this.minimizeDiv.style.display = 'none';
-            this.minimizeDiv.className = this.displayClass + 'MinimizeButton';
+            this.minimizeDiv.className = this.displayClass + 'MinimizeButton olButton';
-            OpenLayers.Event.observe(this.minimizeDiv, 'click', 
-                OpenLayers.Function.bindAsEventListener(this.minimizeControl,
-                                                        this)
-            );
             this.div.appendChild(this.minimizeDiv);            
-            
-            var eventsToStop = ['dblclick','mousedown'];
-            
-            for (var i=0, len=eventsToStop.length; i<len; i++) {
-
-                OpenLayers.Event.observe(this.maximizeDiv, 
-                                         eventsToStop[i], 
-                                         OpenLayers.Event.stop);
-
-                OpenLayers.Event.observe(this.minimizeDiv,
-                                         eventsToStop[i], 
-                                         OpenLayers.Event.stop);
-            }
-            
             this.minimizeControl();
         } else {
             // show the overview map
@@ -292,7 +269,11 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
             this.update();
         }
         
-        this.map.events.register('moveend', this, this.update);
+        this.map.events.on({
+            buttonclick: this.onButtonClick,
+            moveend: this.update,
+            scope: this
+        });
         
         if (this.maximized) {
             this.maximizeControl();
@@ -364,6 +345,21 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
         this.updateMapToRect();
     },
     
+    /**
+     * Method: onButtonClick
+     *
+     * Parameters:
+     * evt - {Event}
+     */
+    onButtonClick: function(evt) {
+        if (evt.button === this.minimizeDiv) {
+            this.minimizeControl();
+            propagate = false;
+        } else if (evt.button === this.maximizeDiv) {
+            this.maximizeControl();
+        };
+    },
+
     /**
      * Method: maximizeControl
      * Unhide the control.  Called when the control is in the map viewport.
@@ -488,7 +484,7 @@ OpenLayers.Control.OverviewMap = OpenLayers.Class(OpenLayers.Control, {
                         {controls: [], maxResolution: 'auto', 
                          fallThrough: false}, this.mapOptions);
         this.ovmap = new OpenLayers.Map(this.mapDiv, options);
-        this.ovmap.eventsDiv.appendChild(this.extentRectangle);
+        this.ovmap.viewPortDiv.appendChild(this.extentRectangle);
         
         // prevent ovmap from being destroyed when the page unloads, because
         // the OverviewMap control has to do this (and does it).

lib/OpenLayers/Control/PanZoom.js

@@ -6,6 +6,7 @@
 
 /**
  * @requires OpenLayers/Control.js
+ * @requires OpenLayers/Events/buttonclick.js
  */
 
 /**
@@ -64,12 +65,26 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
      * APIMethod: destroy
      */
     destroy: function() {
+        if (this.map) {
+            this.map.events.unregister("buttonclick", this, this.onButtonClick);
+        }
         this.removeButtons();
         this.buttons = null;
         this.position = null;
         OpenLayers.Control.prototype.destroy.apply(this, arguments);
     },
 
+    /** 
+     * Method: setMap
+     *
+     * Properties:
+     * map - {<OpenLayers.Map>} 
+     */
+    setMap: function(map) {
+        OpenLayers.Control.prototype.setMap.apply(this, arguments);
+        this.map.events.register("buttonclick", this, this.onButtonClick);
+    },
+
     /**
      * Method: draw
      *
@@ -126,29 +141,8 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
         btn.style.cursor = "pointer";
         //we want to add the outer div
         this.div.appendChild(btn);
-
-        OpenLayers.Event.observe(btn, "mousedown", 
-            OpenLayers.Function.bindAsEventListener(this.buttonDown, btn));
-        OpenLayers.Event.observe(btn, "dblclick", 
-            OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
-        OpenLayers.Event.observe(btn, "click", 
-            OpenLayers.Function.bindAsEventListener(this.doubleClick, btn));
         btn.action = id;
-        btn.map = this.map;
+        btn.className = "olButton";
-    
-        if(!this.slideRatio){
-            var slideFactorPixels = this.slideFactor;
-            var getSlideFactor = function() {
-                return slideFactorPixels;
-            };
-        } else {
-            var slideRatio = this.slideRatio;
-            var getSlideFactor = function(dim) {
-                return this.map.getSize()[dim] * slideRatio;
-            };
-        }
-
-        btn.getSlideFactor = getSlideFactor;
     
         //we want to remember/reference the outer div
         this.buttons.push(btn);
@@ -162,9 +156,6 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
      * btn - {Object}
      */
     _removeButton: function(btn) {
-        OpenLayers.Event.stopObservingElement(btn);
-        btn.map = null;
-        btn.getSlideFactor = null;
         this.div.removeChild(btn);
         OpenLayers.Util.removeItem(this.buttons, btn);
     },
@@ -179,31 +170,14 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
     },
     
     /**
-     * Method: doubleClick
+     * Method: onButtonClick
-     *
-     * Parameters:
-     * evt - {Event} 
-     *
-     * Returns:
-     * {Boolean}
-     */
-    doubleClick: function (evt) {
-        OpenLayers.Event.stop(evt);
-        return false;
-    },
-    
-    /**
-     * Method: buttonDown
      *
      * Parameters:
      * evt - {Event}
      */
-    buttonDown: function (evt) {
+    onButtonClick: function(evt) {
-        if (!OpenLayers.Event.isLeftClick(evt)) {
+        var btn = evt.button;
-            return;
+        switch (btn.action) {
-        }
-
-        switch (this.action) {
             case "panup": 
                 this.map.pan(0, -this.getSlideFactor("h"));
                 break;
@@ -226,8 +200,21 @@ OpenLayers.Control.PanZoom = OpenLayers.Class(OpenLayers.Control, {
                 this.map.zoomToMaxExtent(); 
                 break;
         }
+    },
     
-        OpenLayers.Event.stop(evt);
+    /**
+     * Method: getSlideFactor
+     *
+     * Parameters:
+     * dim - {String} "w" or "h" (for width or height).
+     *
+     * Returns:
+     * {Number} The slide factor for panning in the requested direction.
+     */
+    getSlideFactor: function(dim) {
+        return this.slideRatio ?
+            this.map.getSize()[dim] * this.slideRatio :
+            this.slideFactor;
     },
 
     CLASS_NAME: "OpenLayers.Control.PanZoom"

lib/OpenLayers/Control/Panel.js

@@ -5,6 +5,7 @@
 
 /**
  * @requires OpenLayers/Control.js
+ * @requires OpenLayers/Events/buttonclick.js
  */
 
 /**
@@ -103,6 +104,9 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
      * APIMethod: destroy
      */
     destroy: function() {
+        if (this.map) {
+            this.map.events.unregister("buttonclick", this, this.onButtonClick);
+        }
         OpenLayers.Control.prototype.destroy.apply(this, arguments);
         for (var ctl, i = this.controls.length - 1; i >= 0; i--) {
             ctl = this.controls[i];
@@ -112,7 +116,6 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
                     deactivate: this.iconOff
                 });
             }
-            OpenLayers.Event.stopObservingElement(ctl.panel_div);
             ctl.panel_div = null;
         }
         this.activeState = null;
@@ -166,6 +169,12 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
      */    
     draw: function() {
         OpenLayers.Control.prototype.draw.apply(this, arguments);
+        if (this.div.parentNode === this.map.viewPortDiv) {
+            map.events.register("buttonclick", this, this.onButtonClick);
+        } else {
+            this.events.element = this.div;
+            this.events.register("buttonclick", this, this.onButtonClick);
+        }
         this.addControlsToMap(this.controls);
         return this.div;
     },
@@ -244,17 +253,11 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
         // since they need to pass through.
         for (var i=0, len=controls.length; i<len; i++) {
             var element = document.createElement("div");
-            element.className = controls[i].displayClass + "ItemInactive";
+            element.className = controls[i].displayClass + "ItemInactive olButton";
             controls[i].panel_div = element;
             if (controls[i].title != "") {
                 controls[i].panel_div.title = controls[i].title;
             }
-            OpenLayers.Event.observe(controls[i].panel_div, "click", 
-                OpenLayers.Function.bind(this.onClick, this, controls[i]));
-            OpenLayers.Event.observe(controls[i].panel_div, "dblclick", 
-                OpenLayers.Function.bind(this.onDoubleClick, this, controls[i]));
-            OpenLayers.Event.observe(controls[i].panel_div, "mousedown", 
-                OpenLayers.Function.bindAsEventListener(OpenLayers.Event.stop));
         }    
 
         if (this.map) { // map.addControl() has already been called on the panel
@@ -312,18 +315,20 @@ OpenLayers.Control.Panel = OpenLayers.Class(OpenLayers.Control, {
     },
     
     /**
-     * Method: onClick
+     * Method: onButtonClick
+     *
+     * Parameters:
+     * evt - {Event}
      */
-    onClick: function (ctrl, evt) {
+    onButtonClick: function (evt) {
-        OpenLayers.Event.stop(evt ? evt : window.event);
+        var controls = this.controls,
-        this.activateControl(ctrl);
+            button = evt.button || OpenLayers.Event.element(evt);
-    },
+        for (var i=controls.length-1; i>=0; --i) {
-
+            if (controls[i].panel_div === button) {
-    /**
+                this.activateControl(controls[i]);
-     * Method: onDoubleClick
+                break;
-     */
+            }
-    onDoubleClick: function(ctrl, evt) {
+        }
-        OpenLayers.Event.stop(evt ? evt : window.event);
     },
 
     /**

lib/OpenLayers/Events.js

@@ -155,13 +155,18 @@ OpenLayers.Event = {
      * Parameters: 
      * event - {Event} 
      * allowDefault - {Boolean} If true, we stop the event chain but 
-     *                               still allow the default browser 
+     *     still allow the default browser behaviour (text selection,
-     *                               behaviour (text selection, radio-button 
+     *     radio-button clicking, etc).  Default is false.
-     *                               clicking, etc)
+     * terminate - {Boolean} If true, no more listeners registered through an
-     *                               Default false
+     *     <OpenLayers.Events> instance on the same event on the same element
+     *     will receive this event.  Extensions that call <stop> should set
+     *     this to true. Default is false.
      */
-    stop: function(event, allowDefault) {
+    stop: function(event, allowDefault, terminate) {
         
+        if (terminate) {
+            event._terminated = true;
+        }
         if (!allowDefault) { 
             if (event.preventDefault) {
                 event.preventDefault();
@@ -451,6 +456,26 @@ OpenLayers.Events = OpenLayers.Class({
     */
     includeXY: false,      
     
+    /**
+     * Property: extensions
+     * {Object} Event extensions registered with this instance. Keys are
+     *     event types, values are <OpenLayers.Events.*> extension instances.
+     *
+     * Extensions create an event in addition to browser events, which usually
+     * fires when a sequence of browser events is completed. Extensions are
+     * automatically instantiated when a listener is registered for an event
+     * provided by an extension.
+     *
+     * Extesions are created in the <OpenLayers.Events> namespace using
+     * <OpenLayers.Class>, and named after the event they provide.
+     * The constructor recieves the target <OpenLayers.Events> instance as
+     * argument. Extensions are expected to have an "observe" method, which is
+     * called to register its sequence events on the target's dom element,
+     * using <OpenLayers.Event.observe>. See <OpenLayers.Events.buttonclick>
+     * for a reference implementation.
+     */
+    extensions: null,
+
     /**
      * Method: clearMouseListener
      * A version of <clearMouseCache> that is bound to this instance so that
@@ -478,6 +503,7 @@ OpenLayers.Events = OpenLayers.Class({
         this.object     = object;
         this.fallThrough = fallThrough;
         this.listeners  = {};
+        this.extensions = {};
         
         // if a dom element is specified, add a listeners list 
         // for browser events on the element and register them
@@ -500,6 +526,12 @@ OpenLayers.Events = OpenLayers.Class({
      * APIMethod: destroy
      */
     destroy: function () {
+        for (var e in this.extensions) {
+            if (typeof this.extensions[e].destroy === "function") {
+                this.extensions[e].destroy();
+            }
+        }
+        this.extensions = null;
         if (this.element) {
             OpenLayers.Event.stopObservingElement(this.element);
             if(this.element.hasScrollEvent) {
@@ -531,9 +563,15 @@ OpenLayers.Events = OpenLayers.Class({
      *
      * Parameters:
      * element - {HTMLDOMElement} a DOM element to attach browser events to
+     * options - {Object} Additional options for his method.
+     *
+     * Valid options:
+     * keepElement - {Boolean} If set to true, the instance will not stop
+     *     observing events on an element it was previously attached to.
      */
-    attachToElement: function (element) {
+    attachToElement: function (element, options) {
-        if(this.element) {
+        options = options || {};
+        if(this.element && !options.keepElement) {
             OpenLayers.Event.stopObservingElement(this.element);
         }
         this.element = element;
@@ -547,6 +585,33 @@ OpenLayers.Events = OpenLayers.Class({
         OpenLayers.Event.observe(element, "dragstart", OpenLayers.Event.stop);
     },
     
+    /**
+     * Method: addExtension
+     * Adds an extension event to this instance.
+     *
+     * Parameters:
+     * type - {String} the name of the extension event type to add
+     */
+    addExtension: function(type) {
+        if (this.element.attachEvent && !this.element.addEventListener) {
+            // old IE - last registered, first triggered. No need to
+            // re-register the events to get them in a working order
+            this.extensions[type] = new OpenLayers.Events[type](this);
+        } else {
+            // Other browsers - last registered, last triggered. We stop
+            // observing the element, let the extensions register their browser
+            // events, and then we attach this instance to the element again.
+            OpenLayers.Event.stopObservingElement(this.element);
+            for (var t in this.extensions) {
+                if (typeof this.extensions[t].observe === "function") {
+                    this.extensions[t].observe();
+                }
+            }
+            this.extensions[type] = new OpenLayers.Events[type](this);
+            this.attachToElement(this.element, {keepElement: true});
+        }
+    },
+    
     /**
      * APIMethod: on
      * Convenience method for registering listeners with a common scope.
@@ -612,6 +677,9 @@ OpenLayers.Events = OpenLayers.Class({
      *                      the events queue instead of to the end.
      */
     register: function (type, obj, func, priority) {
+        if (type in OpenLayers.Events && !this.extensions[type]) {
+            this.addExtension(type);
+        }
         if (func != null) {
             if (obj == null)  {
                 obj = this.object;
@@ -784,8 +852,8 @@ OpenLayers.Events = OpenLayers.Class({
      */
     handleBrowserEvent: function (evt) {
         var type = evt.type, listeners = this.listeners[type];
-        if(!listeners || listeners.length == 0) {
+        if(!listeners || listeners.length == 0 || evt._terminated) {
-            // noone's listening, bail out
+            // noone's listening or event was terminated through <stop>, bail out
             return;
         }
         // add clientX & clientY to all events - corresponds to average x, y

lib/OpenLayers/Events/buttonclick.js

@@ -0,0 +1,150 @@
+/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for 
+ * full list of contributors). Published under the Clear BSD license.  
+ * See http://svn.openlayers.org/trunk/openlayers/license.txt for the
+ * full text of the license. */
+
+/**
+ * @requires OpenLayers/Events.js
+ */
+
+/**
+ * Class: OpenLayers.Events.buttonclick
+ * Extension event type for handling buttons on top of a dom element. This
+ *     event type fires "buttonclick" on its <target> when a button was
+ *     clicked. Buttons are detected by the "olButton" class.
+ *
+ * This event type makes sure that button clicks do not interfer with other
+ *     events that are registered on the same <element>.
+ */
+OpenLayers.Events.buttonclick = OpenLayers.Class({
+    
+    /**
+     * APIProperty: target
+     * {<OpenLayers.Events>} The events instance that the buttonclick event will
+     * be triggered on.
+     */
+    target: null,
+    
+    /**
+     * Property: events
+     * {Array} Events to observe and conditionally stop from propagating when
+     *     an element with the olButton (or its olAlphaImg child) is clicked.
+     */
+    events: [
+        'mousedown', 'mouseup', 'click', 'dblclick',
+        'touchstart', 'touchmove', 'touchend'
+    ],
+    
+    /**
+     * Property: startRegEx
+     * {RegExp} Regular expression to test Event.type for events that start
+     *     a buttonclick sequence.
+     */
+    startRegEx: /^mousedown|touchstart$/,
+
+    /**
+     * Property: cancelRegEx
+     * {RegExp} Regular expression to test Event.type for events that cancel
+     *     a buttonclick sequence.
+     */
+    cancelRegEx: /^touchmove$/,
+
+    /**
+     * Property: completeRegEx
+     * {RegExp} Regular expression to test Event.type for events that complete
+     *     a buttonclick sequence.
+     */
+    completeRegEx: /^mouseup|touchend$/,
+    
+    /**
+     * Constructor: OpenLayers.Events.buttonclick
+     * Construct a buttonclick event type. Applications are not supposed to
+     *     create instances of this class - they are created on demand by
+     *     <OpenLayers.Events> instances.
+     *
+     * Parameters:
+     * options - {<OpenLayers.Events>|Object} Target instance of
+     *     <OpenLayers.Events> or configuration properties for this
+     *     <OpenLayers.Events.buttonclick> instance.
+     *
+     * Required configuration properties:
+     * target - {<OpenLayers.Events>} The events instance that the buttonclick
+     *     event will be triggered on.
+     */
+    initialize: function(options) {
+        if (options instanceof OpenLayers.Events) {
+            options = {target: options};
+        }
+        OpenLayers.Util.extend(this, options);
+        
+        this._buttonClick = OpenLayers.Function.bindAsEventListener(
+            this.buttonClick, this
+        );
+        this.observe();
+    },
+    
+    /**
+     * Method: observe
+     */
+    observe: function() {
+        for (var i=this.events.length-1; i>=0; --i) {
+            OpenLayers.Event.observe(
+                this.target.element, this.events[i], this._buttonClick
+            );            
+        };
+    },
+    
+    /**
+     * Method: stopObserving
+     */
+    stopObserving: function() {
+        for (var i=this.events.length-1; i>=0; --i) {
+            OpenLayers.Event.stopObserving(
+                this.target.element, this.events[i], this._buttonClick
+            );            
+        }
+    },
+
+    /**
+     * Method: destroy
+     */
+    destroy: function() {
+        this.stopObserving()
+    },
+
+    /**
+     * Method: buttonClick
+     * Check if a button was clicked, and fire the buttonclick event
+     *
+     * Parameters:
+     * evt - {Event}
+     */
+    buttonClick: function(evt) {
+        if (OpenLayers.Event.isLeftClick(evt) || !~evt.type.indexOf("mouse")) {
+            var element = OpenLayers.Event.element(evt);
+            if (OpenLayers.Element.hasClass(element, "olAlphaImg")) {
+                element = element.parentNode;
+            }
+            if (OpenLayers.Element.hasClass(element, "olButton")) {
+                if (this._buttonStarted) {
+                    if (this.completeRegEx.test(evt.type)) {
+                        this.target.triggerEvent("buttonclick", {
+                            button: element
+                        });
+                    }
+                    if (this.cancelRegEx.test(evt.type)) {
+                        delete this._buttonStarted;
+                    }
+                    OpenLayers.Event.stop(evt, false, true);
+                }
+                if (this.startRegEx.test(evt.type)) {
+                    this._buttonStarted = true;
+                    OpenLayers.Event.stop(evt, false, true);
+                }
+            } else {
+                delete this._buttonStarted;
+            }
+        }
+    }
+    
+});

lib/OpenLayers/Handler/Box.js

@@ -103,10 +103,10 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
         this.zoomBox.className = this.boxDivClassName;                                         
         this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
         
-        this.map.eventsDiv.appendChild(this.zoomBox);
+        this.map.viewPortDiv.appendChild(this.zoomBox);
         
         OpenLayers.Element.addClass(
-            this.map.eventsDiv, "olDrawBox"
+            this.map.viewPortDiv, "olDrawBox"
         );
     },
 
@@ -154,11 +154,11 @@ OpenLayers.Handler.Box = OpenLayers.Class(OpenLayers.Handler, {
      * Remove the zoombox from the screen and nullify our reference to it.
      */
     removeBox: function() {
-        this.map.eventsDiv.removeChild(this.zoomBox);
+        this.map.viewPortDiv.removeChild(this.zoomBox);
         this.zoomBox = null;
         this.boxOffsets = null;
         OpenLayers.Element.removeClass(
-            this.map.eventsDiv, "olDrawBox"
+            this.map.viewPortDiv, "olDrawBox"
         );
 
     },

lib/OpenLayers/Handler/Drag.js

@@ -442,7 +442,7 @@ OpenLayers.Handler.Drag = OpenLayers.Class(OpenLayers.Handler, {
      * {Boolean} Let the event propagate.
      */
     mouseout: function (evt) {
-        if (this.started && OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
+        if (this.started && OpenLayers.Util.mouseLeft(evt, this.map.viewPortDiv)) {
             if(this.documentDrag === true) {
                 this.addDocumentEvents();
             } else {

lib/OpenLayers/Handler/Hover.js

@@ -107,7 +107,7 @@ OpenLayers.Handler.Hover = OpenLayers.Class(OpenLayers.Handler, {
      * {Boolean} Continue propagating this event.
      */
     mouseout: function(evt) {
-        if (OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
+        if (OpenLayers.Util.mouseLeft(evt, this.map.viewPortDiv)) {
             this.clearTimer();
             this.callback('move', [evt]);
         }

lib/OpenLayers/Handler/Point.js

@@ -545,7 +545,7 @@ OpenLayers.Handler.Point = OpenLayers.Class(OpenLayers.Handler, {
      * evt - {Event} The browser event
      */
     mouseout: function(evt) {
-        if(OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
+        if(OpenLayers.Util.mouseLeft(evt, this.map.viewPortDiv)) {
             this.stoppedDown = this.stopDown;
             this.mouseDown = false;
         }

lib/OpenLayers/Layer/EventPane.js

@@ -108,7 +108,7 @@ OpenLayers.Layer.EventPane = OpenLayers.Class(OpenLayers.Layer, {
         }
 
         if (this.isFixed) {
-            this.map.eventsDiv.appendChild(this.pane);
+            this.map.viewPortDiv.appendChild(this.pane);
         } else {
             this.map.layerContainerDiv.appendChild(this.pane);
         }

lib/OpenLayers/Map.js

@@ -513,17 +513,8 @@ OpenLayers.Map = OpenLayers.Class({
         this.viewPortDiv.className = "olMapViewport";
         this.div.appendChild(this.viewPortDiv);
 
-        // the eventsDiv is where we listen for all map events
-        var eventsDiv = document.createElement("div");
-        eventsDiv.id = this.id + "_events";
-        eventsDiv.style.position = "absolute";
-        eventsDiv.style.width = "100%";
-        eventsDiv.style.height = "100%";
-        eventsDiv.style.zIndex = this.Z_INDEX_BASE.Control - 1;
-        this.viewPortDiv.appendChild(eventsDiv);
-        this.eventsDiv = eventsDiv;
         this.events = new OpenLayers.Events(
-            this, this.eventsDiv, null, this.fallThrough, 
+            this, this.viewPortDiv, null, this.fallThrough, 
             {includeXY: true}
         );
 
@@ -534,7 +525,7 @@ OpenLayers.Map = OpenLayers.Class({
         this.layerContainerDiv.style.height = '100px';
         this.layerContainerDiv.style.zIndex=this.Z_INDEX_BASE['Popup']-1;
         
-        this.eventsDiv.appendChild(this.layerContainerDiv);
+        this.viewPortDiv.appendChild(this.layerContainerDiv);
 
         this.updateSize();
         if(this.eventListeners instanceof Object) {

lib/OpenLayers/Util.js

@@ -416,6 +416,7 @@ OpenLayers.Util.createAlphaImageDiv = function(id, px, sz, imgURL,
     var div = OpenLayers.Util.createDiv();
     var img = OpenLayers.Util.createImage(null, null, null, null, null, null, 
                                           null, delayDisplay);
+    img.className = "olAlphaImg";
     div.appendChild(img);
 
     OpenLayers.Util.modifyAlphaImageDiv(div, id, px, sz, imgURL, position, 

lib/deprecated.js

@@ -1202,7 +1202,7 @@ OpenLayers.Control.MouseDefaults = OpenLayers.Class(OpenLayers.Control, {
             this.zoomBox.style.opacity = "0.50";
             this.zoomBox.style.fontSize = "1px";
             this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
-            this.map.eventsDiv.appendChild(this.zoomBox);
+            this.map.viewPortDiv.appendChild(this.zoomBox);
         }
         document.onselectstart = OpenLayers.Function.False;
         OpenLayers.Event.stop(evt);
@@ -1275,7 +1275,7 @@ OpenLayers.Control.MouseDefaults = OpenLayers.Class(OpenLayers.Control, {
      */
     defaultMouseOut: function (evt) {
         if (this.mouseDragStart != null && 
-            OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
+            OpenLayers.Util.mouseLeft(evt, this.map.viewPortDiv)) {
             if (this.zoomBox) {
                 this.removeZoomBox();
             }
@@ -1339,7 +1339,7 @@ OpenLayers.Control.MouseDefaults = OpenLayers.Class(OpenLayers.Control, {
      * Remove the zoombox from the screen and nullify our reference to it.
      */
     removeZoomBox: function() {
-        this.map.eventsDiv.removeChild(this.zoomBox);
+        this.map.viewPortDiv.removeChild(this.zoomBox);
         this.zoomBox = null;
     },
 
@@ -1602,7 +1602,7 @@ OpenLayers.Control.MouseToolbar = OpenLayers.Class(
                 this.zoomBox.style.opacity = "0.50";
                 this.zoomBox.style.fontSize = "1px";
                 this.zoomBox.style.zIndex = this.map.Z_INDEX_BASE["Popup"] - 1;
-                this.map.eventsDiv.appendChild(this.zoomBox);
+                this.map.viewPortDiv.appendChild(this.zoomBox);
                 this.performedDrag = true;
                 break;
             case "measure":
@@ -1769,7 +1769,7 @@ OpenLayers.Control.MouseToolbar = OpenLayers.Class(
      */
     defaultMouseOut: function (evt) {
         if (this.mouseDragStart != null
-            && OpenLayers.Util.mouseLeft(evt, this.map.eventsDiv)) {
+            && OpenLayers.Util.mouseLeft(evt, this.map.viewPortDiv)) {
             if (this.zoomBox) {
                 this.removeZoomBox();
                 if (this.startViaKeyboard) {

tests/Control/PanZoom.html

@@ -168,22 +168,26 @@
         //up
         var delta = [0, -50];
         var dir = "up";
-        control.buttonDown.call(buttons[0], evt);
+        evt.button = buttons[0];
+        control.onButtonClick.call(control, evt);
         
         //left
         var delta = [-125, 0];
         var dir = "left";
-        control.buttonDown.call(buttons[1], evt);
+        evt.button = buttons[1];
+        control.onButtonClick.call(control, evt);
         
         //right
         var delta = [125, 0];
         var dir = "right";
-        control.buttonDown.call(buttons[2], evt);
+        evt.button = buttons[2];
+        control.onButtonClick.call(control, evt);
         
         //down
         var delta = [0, 50];
         var dir = "down";
-        control.buttonDown.call(buttons[3], evt);
+        evt.button = buttons[3];
+        control.onButtonClick.call(control, evt);
         
         map.destroy();
     }

tests/Control/Panel.html

@@ -82,7 +82,7 @@
               "activated one tool control, the other one is inactive and the toggle & button controls also.");
 
         panel.activateControl(toggleControl);
-        t.eq(toggleControl.panel_div.className,"mbControlTestToggleItemActive",
+        t.eq(toggleControl.panel_div.className,"mbControlTestToggleItemActive olButton",
             "className of icon div for toggle control is active.");
         t.ok(toolControl.active && !anotherToolControl.active && toggleControl.active,
               "activated the toggle control, which has no influence on the tool & togggle controls.");
@@ -96,9 +96,9 @@
               "activated the button control, which has no influence on the tool & togggle controls.");
 
         panel.activateControl(anotherToolControl);
-        t.eq(anotherToolControl.panel_div.className,"mbControlTestToolItemActive",
+        t.eq(anotherToolControl.panel_div.className,"mbControlTestToolItemActive olButton",
             "className of icon div for anotherToolControl is active.");
-        t.eq(toolControl.panel_div.className,"olControlZoomBoxItemInactive",
+        t.eq(toolControl.panel_div.className,"olControlZoomBoxItemInactive olButton",
             "className of icon div for toolControl is inactive.");
         t.ok(!toolControl.active && anotherToolControl.active && toggleControl.active,
               "activated the other tool control, the first one is inactive and the toggle control still active.");

tests/Events.html

@@ -82,7 +82,7 @@
 
     function test_Events_register_unregister(t) {
  
-        t.plan(19);
+        t.plan(20);
  
         var mapDiv = OpenLayers.Util.getElement('map');
         var obj = {result: 0};
@@ -166,6 +166,9 @@
             t.fail("unregistering for an event with no registered listeners causes trouble: " + err);
         }
         
+        events.register("buttonclick", obj, func);
+        t.ok(events.extensions.buttonclick, "buttonclick extension registered");
+
     }
 
     function test_Events_remove(t) {

tests/Events/buttonclick.html

@@ -0,0 +1,133 @@
+<html>
+<head>
+  <script src="../OLLoader.js"></script>
+  <script type="text/javascript">
+
+    var log, buttonClick, events, element, button;
+    function init() {
+        element = document.getElementById("map");
+        button = document.getElementById("button");
+    }
+    function trigger(evt) {
+        OpenLayers.Util.applyDefaults(evt, {
+            button: 1,
+            target: button
+        });
+        buttonClick._buttonClick(evt);
+        events.handleBrowserEvent(evt);
+    }
+    function logEvent(evt) {
+        log.push(evt);
+    }
+   
+    function test_ButtonClick(t) {
+        t.plan(2);
+        events = new OpenLayers.Events({}, document.getElementById("map"));
+        buttonClick = new OpenLayers.Events.buttonclick({target: events});
+        t.ok(buttonClick.target === events, "target set from options argument");
+        buttonClick = new OpenLayers.Events.buttonclick(events);
+        t.ok(buttonClick.target === events, "target set from constructor arg");
+        buttonClick.destroy();
+        events.destroy();
+    }
+    
+    function test_ButtonClick_buttonClick(t) {
+        t.plan(23);
+        events = new OpenLayers.Events({}, element);
+        events.on({
+            "buttonclick": logEvent,
+            "mousedown": logEvent,
+            "mouseup": logEvent,
+            "click": logEvent,
+            "dblclick": logEvent,
+            "touchstart": logEvent,
+            "touchend": logEvent
+        });
+        buttonClick = events.extensions["buttonclick"];
+        
+        // a complete click
+        log = [];
+        trigger({type: "mousedown"});
+        trigger({type: "mouseup"});
+        t.eq(log.length, 1, "one event fired for mousedown-mouseup");
+        t.eq(log[0].type, "buttonclick", "buttonclick event fired");
+        
+        // a complete tap
+        log = [];
+        trigger({type: "touchstart"});
+        trigger({type: "touchend"});
+        t.eq(log.length, 1, "one event fired for touchstart-touchend");
+        t.eq(log[0].type, "buttonclick", "buttonclick event fired");
+        
+        // mouse sequence started on button
+        log = [];
+        trigger({type: "mousedown"});
+        trigger({type: "mouseup", target: element});
+        t.eq(log.length, 1, "one event fired for mousedown-(leave)-mouseup");
+        t.eq(log[0].type, "mouseup", "mouseup event goes through when sequence not finished on button");
+
+        // touch sequence started on button
+        log = [];
+        trigger({type: "touchstart"});
+        trigger({type: "touchmove"});
+        trigger({type: "touchend"});
+        t.eq(log.length, 1, "one event fired for touchstart-(leave)-touchend");
+        t.eq(log[0].type, "touchend", "touchend event goes through when sequence not finished on button");
+
+        // mouse sequence finished on button
+        log = [];
+        trigger({type: "mousedown", target: element});
+        trigger({type: "mouseup"});
+        t.eq(log.length, 2, "two event fired for mousedown-(enter)-mouseup");
+        t.eq(log[0].type, "mousedown", "mousedown unrelated to button goes through");
+        t.eq(log[1].type, "mouseup", "mouseup goes through when sequence started outside button");
+
+        // touch sequence finished on button
+        log = [];
+        trigger({type: "touchstart", target: element});
+        trigger({type: "touchend"});
+        t.eq(log.length, 2, "two event fired for touchstart-(enter)-touchend");
+        t.eq(log[0].type, "touchstart", "touchstart unrelated to button goes through");
+        t.eq(log[1].type, "touchend", "touchend goes through when sequence started outside button");
+        
+        // dblclick
+        log = [];
+        trigger({type: "mousedown"});
+        trigger({type: "mouseup"});
+        trigger({type: "click"});
+        trigger({type: "mousedown"});
+        trigger({type: "mouseup"});
+        trigger({type: "click"});
+        trigger({type: "dblclick"});
+        t.eq(log.length, 2, "two events fired for doubleclick");
+        t.eq(log[0].type, "buttonclick", "buttonclick for 1st click");
+        t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click");
+        
+        // dblclick - IE
+        log = [];
+        trigger({type: "mousedown"});
+        trigger({type: "mouseup"});
+        trigger({type: "mouseup"});
+        trigger({type: "dblclick"});
+        t.eq(log.length, 2, "two events fired for dblclick in IE");
+        t.eq(log[0].type, "buttonclick", "buttonclick for 1st click in IE");
+        t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click IE");
+
+        // rightclick
+        log = []
+        trigger({type: "mousedown", button: 2});
+        trigger({type: "mouseup", button: 2});
+        t.eq(log.length, 2, "two events fired for rightclick");
+        t.eq(log[0].type, "mousedown", "mousedown from rightclick goes through");
+        t.eq(log[1].type, "mouseup", "mouseup from rightclick goes through");
+    }
+  </script>
+</head>
+<body onload="init()">
+    <div id="map" style="width: 600px; height: 300px;">
+        <div id="button" class="olButton">
+            <img class="olAlphaImg">
+        </div>
+    </div>
+</body>
+</html>

tests/Handler/Drag.html

@@ -252,7 +252,7 @@
             t.ok(evt.xy.x == testEvents.done.xy.x &&
                  evt.xy.y == testEvents.done.xy.y,
                  "mouseout calls Util.mouseLeft with the correct event");
-            t.eq(element.id, map.eventsDiv.id,
+            t.eq(element.id, map.viewPortDiv.id,
                  "mouseout calls Util.mouseLeft with the correct element");
             return true;
         }

tests/Layer/EventPane.html

@@ -94,9 +94,9 @@
         if (document.createEvent) { // Mozilla
             var evObj = document.createEvent('MouseEvents');
             evObj.initEvent('mousemove', true, false);
-            map.eventsDiv.dispatchEvent(evObj);
+            map.viewPortDiv.dispatchEvent(evObj);
         } else if(document.createEventObject) { // IE
-            map.eventsDiv.fireEvent('onmousemove');
+            map.viewPortDiv.fireEvent('onmousemove');
         }
         
         t.eq(log.length, 1, "got one event");

tests/list-tests.html

@@ -46,6 +46,7 @@
     <li>Control/PanPanel.html</li>
     <li>Control/SLDSelect.html</li>
     <li>Events.html</li>
+    <li>Events/buttonclick.html</li>
     <li>Extras.html</li>
     <li>Feature.html</li>
     <li>Feature/Vector.html</li>