diff --git a/examples/select-features.html b/examples/select-features.html
index 8e3905f067..7930f4b29d 100644
--- a/examples/select-features.html
+++ b/examples/select-features.html
@@ -33,7 +33,17 @@
Select features example
-
Example of using the Select interaction. Select features by clicking polygons. Hold the Shift-key to toggle the feature in the selection.
+
Example of using the Select interaction. Choose between Single-click, Click and Hover as the event type for selection in the combobox below. When using Single-click or Click you can hold do Shift key to toggle the feature in the selection.
+
Note: when Single-click is used double-clicks won't select features. This in contrast to Click, where a double-click will both select the feature and zoom the map (because of the DoubleClickZoom interaction). Note that Single-click is less responsive than Click because of the delay it uses to detect double-clicks.
+
diff --git a/examples/select-features.js b/examples/select-features.js
index 5cd47a3729..7386fa95cf 100644
--- a/examples/select-features.js
+++ b/examples/select-features.js
@@ -1,5 +1,6 @@
goog.require('ol.Map');
goog.require('ol.View');
+goog.require('ol.events.condition');
goog.require('ol.interaction');
goog.require('ol.interaction.Select');
goog.require('ol.layer.Tile');
@@ -18,10 +19,7 @@ var vector = new ol.layer.Vector({
})
});
-var select = new ol.interaction.Select();
-
var map = new ol.Map({
- interactions: ol.interaction.defaults().extend([select]),
layers: [raster, vector],
target: 'map',
view: new ol.View({
@@ -29,3 +27,46 @@ var map = new ol.Map({
zoom: 2
})
});
+
+var select = null; // ref to currently selected interaction
+
+// select interaction working on "singleclick"
+var selectSingleClick = new ol.interaction.Select();
+
+// select interaction working on "click"
+var selectClick = new ol.interaction.Select({
+ condition: ol.events.condition.click
+});
+
+// select interaction working on "mousemove"
+var selectMouseMove = new ol.interaction.Select({
+ condition: ol.events.condition.mouseMove
+});
+
+var selectElement = document.getElementById('type');
+
+var changeInteraction = function() {
+ if (select !== null) {
+ map.removeInteraction(select);
+ }
+ var value = selectElement.value;
+ if (value == 'singleclick') {
+ select = selectSingleClick;
+ } else if (value == 'click') {
+ select = selectClick;
+ } else if (value == 'mousemove') {
+ select = selectMouseMove;
+ } else {
+ select = null;
+ }
+ if (select !== null) {
+ map.addInteraction(select);
+ }
+};
+
+
+/**
+ * onchange callback on the select element.
+ */
+selectElement.onchange = changeInteraction;
+changeInteraction();
diff --git a/src/ol/events/condition.js b/src/ol/events/condition.js
index a1c61faf7d..eaca8869c2 100644
--- a/src/ol/events/condition.js
+++ b/src/ol/events/condition.js
@@ -55,6 +55,26 @@ ol.events.condition.altShiftKeysOnly = function(mapBrowserEvent) {
ol.events.condition.always = goog.functions.TRUE;
+/**
+ * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
+ * @return {boolean} True if the event is a map `click` event.
+ * @todo api
+ */
+ol.events.condition.click = function(mapBrowserEvent) {
+ return mapBrowserEvent.type == ol.MapBrowserEvent.EventType.CLICK;
+};
+
+
+/**
+ * @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
+ * @return {boolean} True if the browser event is a `mousemove` event.
+ * @todo api
+ */
+ol.events.condition.mouseMove = function(mapBrowserEvent) {
+ return mapBrowserEvent.originalEvent.type == 'mousemove';
+};
+
+
/**
* Always false.
* @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
@@ -66,7 +86,7 @@ ol.events.condition.never = goog.functions.FALSE;
/**
* @param {ol.MapBrowserEvent} mapBrowserEvent Map browser event.
- * @return {boolean} True if the event is a `singleclick` event.
+ * @return {boolean} True if the event is a map `singleclick` event.
* @todo api
*/
ol.events.condition.singleClick = function(mapBrowserEvent) {