diff --git a/examples/gpx.html b/examples/gpx.html index f0997c44fb..fbb0d2b084 100644 --- a/examples/gpx.html +++ b/examples/gpx.html @@ -47,6 +47,7 @@ + diff --git a/examples/gpx.js b/examples/gpx.js index bf0dbcff35..899b9cdb31 100644 --- a/examples/gpx.js +++ b/examples/gpx.js @@ -28,9 +28,9 @@ var map = new ol.Map({ }) }); -map.on(['click', 'mousemove'], function(evt) { +var displayFeatureInfo = function(pixel) { map.getFeatures({ - pixel: evt.getPixel(), + pixel: pixel, layers: [vector], success: function(featuresByLayer) { var features = featuresByLayer[0]; @@ -41,4 +41,14 @@ map.on(['click', 'mousemove'], function(evt) { document.getElementById('info').innerHTML = info.join(', ') || ' '; } }); +}; + +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); + displayFeatureInfo(pixel); +}); + +map.on('click', function(evt) { + var pixel = evt.getPixel(); + displayFeatureInfo(pixel); }); diff --git a/examples/kml-earthquakes.js b/examples/kml-earthquakes.js index 826f1fb54f..fd2405cea9 100644 --- a/examples/kml-earthquakes.js +++ b/examples/kml-earthquakes.js @@ -59,8 +59,8 @@ info.tooltip({ animation: false, trigger: 'manual' }); -map.on(['click', 'mousemove'], function(evt) { - var pixel = evt.getPixel(); + +var displayFeatureInfo = function(pixel) { info.css({ left: pixel[0] + 'px', top: (pixel[1] - 15) + 'px' @@ -80,4 +80,14 @@ map.on(['click', 'mousemove'], function(evt) { } } }); +}; + +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); + displayFeatureInfo(pixel); +}); + +map.on('click', function(evt) { + var pixel = evt.getPixel(); + displayFeatureInfo(pixel); }); diff --git a/examples/kml-timezones.js b/examples/kml-timezones.js index 80524a9e00..6657961593 100644 --- a/examples/kml-timezones.js +++ b/examples/kml-timezones.js @@ -81,8 +81,8 @@ info.tooltip({ animation: false, trigger: 'manual' }); -map.on(['click', 'mousemove'], function(evt) { - var pixel = evt.getPixel(); + +var displayFeatureInfo = function(pixel) { info.css({ left: pixel[0] + 'px', top: (pixel[1] - 15) + 'px' @@ -102,4 +102,14 @@ map.on(['click', 'mousemove'], function(evt) { } } }); +}; + +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); + displayFeatureInfo(pixel); +}); + +map.on('click', function(evt) { + var pixel = evt.getPixel(); + displayFeatureInfo(pixel); }); diff --git a/examples/kml.html b/examples/kml.html index c3d95e7119..8dab466f48 100644 --- a/examples/kml.html +++ b/examples/kml.html @@ -48,6 +48,7 @@ + diff --git a/examples/kml.js b/examples/kml.js index d99e343ecc..bce5752903 100644 --- a/examples/kml.js +++ b/examples/kml.js @@ -39,9 +39,9 @@ var map = new ol.Map({ }) }); -map.on(['click', 'mousemove'], function(evt) { +var displayFeatureInfo = function(pixel) { map.getFeatures({ - pixel: evt.getPixel(), + pixel: pixel, layers: [vector], success: function(featuresByLayer) { var features = featuresByLayer[0]; @@ -52,4 +52,14 @@ map.on(['click', 'mousemove'], function(evt) { document.getElementById('info').innerHTML = info.join(', ') || ' '; } }); +}; + +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); + displayFeatureInfo(pixel); +}); + +map.on('click', function(evt) { + var pixel = evt.getPixel(); + displayFeatureInfo(pixel); }); diff --git a/examples/vector-layer.html b/examples/vector-layer.html index e9ecdd5aea..038a1b9eea 100644 --- a/examples/vector-layer.html +++ b/examples/vector-layer.html @@ -48,6 +48,7 @@ + diff --git a/examples/vector-layer.js b/examples/vector-layer.js index 8ce9b792bf..f1c2df3d7a 100644 --- a/examples/vector-layer.js +++ b/examples/vector-layer.js @@ -64,9 +64,9 @@ var map = new ol.Map({ }) }); -map.on(['click', 'mousemove'], function(evt) { +var displayFeatureInfo = function(pixel) { map.getFeatures({ - pixel: evt.getPixel(), + pixel: pixel, layers: [vector], success: function(featuresByLayer) { var features = featuresByLayer[0]; @@ -75,4 +75,14 @@ map.on(['click', 'mousemove'], function(evt) { ' '; } }); +}; + +$(map.getViewport()).on('mousemove', function(evt) { + var pixel = map.getEventPixel(evt.originalEvent); + displayFeatureInfo(pixel); +}); + +map.on('click', function(evt) { + var pixel = evt.getPixel(); + displayFeatureInfo(pixel); }); diff --git a/src/ol/map.js b/src/ol/map.js index 24c9d42a37..be7e9bc8c9 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -237,7 +237,9 @@ ol.Map = function(options) { goog.events.EventType.CLICK, goog.events.EventType.DBLCLICK, ol.BrowserFeature.HAS_TOUCH ? - goog.events.EventType.TOUCHSTART : goog.events.EventType.MOUSEDOWN + goog.events.EventType.TOUCHSTART : goog.events.EventType.MOUSEDOWN, + ol.BrowserFeature.HAS_TOUCH ? + goog.events.EventType.TOUCHEND : goog.events.EventType.MOUSEUP ], goog.events.Event.stopPropagation); goog.dom.appendChild(this.viewport_, this.overlayContainerStopEvent_); @@ -704,12 +706,7 @@ ol.Map.prototype.handleMapBrowserEvent = function(mapBrowserEvent) { // coordinates so interactions cannot be used. return; } - if (mapBrowserEvent.type == goog.events.EventType.MOUSEOUT || - mapBrowserEvent.type == goog.events.EventType.TOUCHEND) { - this.focus_ = null; - } else { - this.focus_ = mapBrowserEvent.getCoordinate(); - } + this.focus_ = mapBrowserEvent.getCoordinate(); mapBrowserEvent.frameState = this.frameState_; var interactions = this.getInteractions(); var interactionsArray = /** @type {Array.} */ diff --git a/src/ol/mapbrowserevent.js b/src/ol/mapbrowserevent.js index 382954e5a7..a90bcc64d9 100644 --- a/src/ol/mapbrowserevent.js +++ b/src/ol/mapbrowserevent.js @@ -3,6 +3,7 @@ goog.provide('ol.MapBrowserEvent.EventType'); goog.provide('ol.MapBrowserEventHandler'); goog.require('goog.array'); +goog.require('goog.asserts'); goog.require('goog.events'); goog.require('goog.events.BrowserEvent'); goog.require('goog.events.EventTarget'); @@ -121,20 +122,18 @@ ol.MapBrowserEventHandler = function(map) { */ this.map_ = map; + /** + * @type {number} + * @private + */ + this.clickTimeoutId_ = 0; + /** * @type {boolean} * @private */ this.dragged_ = false; - /** - * Timestamp for the first click of a double click. Will be set back to 0 - * as soon as a double click is detected. - * @type {?number} - * @private - */ - this.timestamp_ = null; - /** * @type {Array.} * @private @@ -166,16 +165,7 @@ ol.MapBrowserEventHandler = function(map) { this.click_, false, this), goog.events.listen(element, goog.events.EventType.MOUSEDOWN, - this.handleMouseDown_, false, this), - goog.events.listen(element, - goog.events.EventType.MOUSEMOVE, - this.relayEvent_, false, this), - goog.events.listen(element, - goog.events.EventType.MOUSEOUT, - this.relayEvent_, false, this), - goog.events.listen(element, - goog.events.EventType.CONTEXTMENU, - this.relayEvent_, false, this) + this.handleMouseDown_, false, this) ]; // touch events this.touchListenerKeys_ = [ @@ -205,7 +195,7 @@ ol.MapBrowserEventHandler.prototype.click_ = function(browserEvent) { if (!this.dragged_) { var newEvent; var type = browserEvent.type; - if (this.timestamp_ === 0 || type == goog.events.EventType.DBLCLICK) { + if (type == goog.events.EventType.DBLCLICK) { newEvent = new ol.MapBrowserEvent( ol.MapBrowserEvent.EventType.DBLCLICK, this.map_, browserEvent); this.dispatchEvent(newEvent); @@ -332,17 +322,26 @@ ol.MapBrowserEventHandler.prototype.handleTouchEnd_ = function(browserEvent) { ol.MapBrowserEvent.EventType.TOUCHEND, this.map_, browserEvent); this.dispatchEvent(newEvent); if (!this.dragged_) { - var now = goog.now(); - if (!this.timestamp_ || now - this.timestamp_ > 250) { - this.timestamp_ = now; + goog.asserts.assert(!goog.isNull(this.down_)); + if (this.clickTimeoutId_ !== 0) { + // double-click + goog.global.clearTimeout(this.clickTimeoutId_); + this.clickTimeoutId_ = 0; + newEvent = new ol.MapBrowserEvent( + ol.MapBrowserEvent.EventType.DBLCLICK, this.map_, this.down_); + this.dispatchEvent(newEvent); + this.down_ = null; } else { - this.timestamp_ = 0; - } - if (!goog.isNull(this.down_)) { - this.click_(this.down_); + // click + this.clickTimeoutId_ = goog.global.setTimeout(goog.bind(function() { + this.clickTimeoutId_ = 0; + newEvent = new ol.MapBrowserEvent( + ol.MapBrowserEvent.EventType.CLICK, this.map_, this.down_); + this.dispatchEvent(newEvent); + this.down_ = null; + }, this), 250); } } - this.down_ = null; }; @@ -379,8 +378,5 @@ ol.MapBrowserEvent.EventType = { DRAGEND: 'dragend', TOUCHSTART: goog.events.EventType.TOUCHSTART, TOUCHMOVE: goog.events.EventType.TOUCHMOVE, - TOUCHEND: goog.events.EventType.TOUCHEND, - MOUSEMOVE: goog.events.EventType.MOUSEMOVE, - MOUSEOUT: goog.events.EventType.MOUSEOUT, - CONTEXTMENU: goog.events.EventType.CONTEXTMENU + TOUCHEND: goog.events.EventType.TOUCHEND };