Merge pull request #1896 from ahocevar/nodragclick

Add click event as responsive alternative to singleclick

examples/drag-and-drop-image-vector.js

@@ -149,6 +149,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/drag-and-drop.js

@@ -145,6 +145,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/gpx.js

@@ -86,6 +86,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/icon.js

@@ -63,7 +63,7 @@ var popup = new ol.Overlay({
 map.addOverlay(popup);
 
 // display popup on click
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   var feature = map.forEachFeatureAtPixel(evt.pixel,
       function(feature, layer) {
         return feature;

examples/igc.js

@@ -125,7 +125,7 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displaySnap(coordinate);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displaySnap(evt.coordinate);
 });
 

examples/image-vector-layer.js

@@ -85,6 +85,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/kml-earthquakes.js

@@ -88,6 +88,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(map.getEventPixel(evt.originalEvent));
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/kml-timezones.js

@@ -95,6 +95,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(map.getEventPixel(evt.originalEvent));
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/kml.js

@@ -52,6 +52,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

examples/overlay.js

@@ -45,7 +45,7 @@ var popup = new ol.Overlay({
 });
 map.addOverlay(popup);
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   var element = popup.getElement();
   var coordinate = evt.coordinate;
   var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(

examples/popup.js

@@ -60,7 +60,7 @@ var map = new ol.Map({
 /**
  * Add a click handler to the map to render the popup.
  */
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   var coordinate = evt.coordinate;
   var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(
       coordinate, 'EPSG:3857', 'EPSG:4326'));

examples/synthetic-points.js

@@ -94,7 +94,7 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displaySnap(coordinate);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displaySnap(evt.coordinate);
 });
 

examples/vector-layer.js

@@ -122,6 +122,6 @@ $(map.getViewport()).on('mousemove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('singleclick', function(evt) {
+map.on('click', function(evt) {
   displayFeatureInfo(evt.pixel);
 });

src/ol/mapbrowserevent.js

@@ -248,11 +248,15 @@ ol.MapBrowserEventHandler.prototype.emulateClickLegacyIE_ =
  * @private
  */
 ol.MapBrowserEventHandler.prototype.emulateClick_ = function(pointerEvent) {
+  var newEvent;
+  newEvent = new ol.MapBrowserPointerEvent(
+      ol.MapBrowserEvent.EventType.CLICK, this.map_, pointerEvent);
+  this.dispatchEvent(newEvent);
   if (this.clickTimeoutId_ !== 0) {
     // double-click
     goog.global.clearTimeout(this.clickTimeoutId_);
     this.clickTimeoutId_ = 0;
-    var newEvent = new ol.MapBrowserPointerEvent(
+    newEvent = new ol.MapBrowserPointerEvent(
         ol.MapBrowserEvent.EventType.DBLCLICK, this.map_, pointerEvent);
     this.dispatchEvent(newEvent);
   } else {
@@ -470,6 +474,12 @@ ol.MapBrowserEvent.EventType = {
    * @todo stability experimental
    */
   SINGLECLICK: 'singleclick',
+  /**
+   * A click with no dragging. A double click will fire two of this.
+   * @event ol.MapBrowserEvent#click
+   * @todo stability experimental
+   */
+  CLICK: goog.events.EventType.CLICK,
   /**
    * A true double click, with no dragging.
    * @event ol.MapBrowserEvent#dblclick

test/spec/ol/mapbrowserevent.test.js

@@ -4,6 +4,7 @@ describe('ol.MapBrowserEventHandler', function() {
   describe('#emulateClick_', function() {
     var clock;
     var handler;
+    var clickSpy;
     var singleclickSpy;
     var dblclickSpy;
     var target;
@@ -15,6 +16,9 @@ describe('ol.MapBrowserEventHandler', function() {
         target: target
       }));
 
+      clickSpy = sinon.spy();
+      goog.events.listen(handler, 'click', clickSpy);
+
       singleclickSpy = sinon.spy();
       goog.events.listen(handler, 'singleclick', singleclickSpy);
 
@@ -28,6 +32,17 @@ describe('ol.MapBrowserEventHandler', function() {
     });
 
     it('emulates click', function() {
+      handler.emulateClick_(new ol.pointer.PointerEvent('pointerdown',
+          new goog.events.BrowserEvent({
+            type: 'mousedown',
+            target: target,
+            clientX: 0,
+            clientY: 0
+          })));
+      expect(clickSpy.called).to.be.ok();
+    });
+
+    it('emulates singleclick', function() {
       handler.emulateClick_(new ol.pointer.PointerEvent('pointerdown',
           new goog.events.BrowserEvent({
             type: 'mousedown',
@@ -54,12 +69,13 @@ describe('ol.MapBrowserEventHandler', function() {
     });
 
     it('emulates dblclick', function() {
-      handler.emulateClick_({
+      handler.emulateClick_(new ol.pointer.PointerEvent('pointerdown',
-        type: 'mousedown',
+          new goog.events.BrowserEvent({
-        target: target,
+            type: 'mousedown',
-        clientX: 0,
+            target: target,
-        clientY: 0
+            clientX: 0,
-      });
+            clientY: 0
+          })));
       expect(singleclickSpy.called).to.not.be.ok();
       expect(dblclickSpy.called).to.not.be.ok();