diff --git a/lib/OpenLayers/Popup.js b/lib/OpenLayers/Popup.js index c342434552..5ba9c9b10f 100644 --- a/lib/OpenLayers/Popup.js +++ b/lib/OpenLayers/Popup.js @@ -888,6 +888,8 @@ OpenLayers.Popup = OpenLayers.Class({ this.hide(); OpenLayers.Event.stop(e); }; + OpenLayers.Event.observe(this.closeDiv, "touchend", + OpenLayers.Function.bindAsEventListener(closePopup, this)); OpenLayers.Event.observe(this.closeDiv, "click", OpenLayers.Function.bindAsEventListener(closePopup, this)); }, @@ -944,7 +946,8 @@ OpenLayers.Popup = OpenLayers.Class({ * 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. + * they are initiated from outside. The same procedure is needed for + * touchmove and touchend events. * * Otherwise, we want to essentially kill the event propagation * for all other events, though we have to do so carefully, @@ -954,6 +957,22 @@ OpenLayers.Popup = OpenLayers.Class({ registerEvents:function() { this.events = new OpenLayers.Events(this, this.div, null, true); + var touchStarted = false; + function onTouchstart(evt) { + touchStarted = true; + OpenLayers.Event.stop(evt, true); + } + function onTouchmove(evt) { + if (touchStarted === true) { + OpenLayers.Event.stop(evt, true); + } + } + function onTouchend(evt) { + if (touchStarted === true) { + touchStarted = false; + OpenLayers.Event.stop(evt, true); + } + } this.events.on({ "mousedown": this.onmousedown, "mousemove": this.onmousemove, @@ -961,6 +980,9 @@ OpenLayers.Popup = OpenLayers.Class({ "click": this.onclick, "mouseout": this.onmouseout, "dblclick": this.ondblclick, + "touchstart": onTouchstart, + "touchmove": onTouchmove, + "touchsend": onTouchend, scope: this }); diff --git a/tests/Popup.html b/tests/Popup.html index 9d22f6a147..10245a0199 100644 --- a/tests/Popup.html +++ b/tests/Popup.html @@ -29,7 +29,7 @@ } function test_Popup_constructor (t) { - t.plan( 8 ); + t.plan(9); var id = "chicken"; var w = 500; @@ -63,11 +63,17 @@ for (var i = 0; i < OpenLayers.Event.observers[cacheID].length; i++) { var observer = OpenLayers.Event.observers[cacheID][i]; if (observer.element == closeImgDiv) { - t.ok(true, "An event was registered for the close box element"); - t.eq(observer.name, "click", "A click event was registered for the close box element"); - //call the registered observer to make sure it's the right one - observer.observer(); - break; + if (observer.name == "click") { + t.ok(true, "A click event was registered for the close box element"); + //call the registered observer to make sure it's the right one + observer.observer(); + } else if (observer.name == "touchend") { + t.ok(true, "A touchend event was registered for the close box element"); + //call the registered observer to make sure it's the right one + observer.observer(); + } else { + t.fail("A " + observer.name + " event was registered for the close box element"); + } } } }