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.
2012-01-20 03:37:11 +01:00
parent e68acfe91a
commit 05de2b5109
22 changed files with 520 additions and 224 deletions
@@ -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>