Touch Screen Tap fires onClick Event twice

Question

I developed a Javascript web application using dojo and the ESRI Javascript API. The main page of the application is a map view where the user can add points on the map.

On my desktop web browser, when I click the map a single new point is added and if I debug I can see that my onClick handler is called only once.

On my iPad, when I tap the map 2 points are added in the exact same location. When I debug the app on the iPad via Safari on my Macbook Pro I can see that the onClick handler is being called twice. Upon further debugging, I have made sure that the code that creates my onClick handler is only being called once.

startEditing : function(template) {

    main.selectHandle.pause();
    main.moveHandle.pause();

    var drawingTool = template.template.drawingTool;

    switch(drawingTool) {
        case FeatureTemplate.TOOL_POINT:
            drawingTool = Draw.POINT;
            break;
    }

    this.drawEndHandle = on(this.drawingToolbar, "draw-end", lang.hitch(this, this.createFeature, template));

    this.drawingToolbar.activate(drawingTool);
},

stopEditing : function() {

    this.drawingToolbar.deactivate();
    this.drawEndHandle.remove();

    main.selectHandle.resume();
    main.moveHandle.resume();

},

createFeature : function(template, evt) {

    var featureLayer = template.featureLayer;
    template = template.template;

    var prototype = template.prototype;

    var geometry = evt.geometry;

    var graphic = new Graphic(prototype.toJson());
    graphic.setGeometry(geometry);

    this.initAttributes(graphic, featureLayer).then(function() {

        var features = [graphic];

        featureLayer.applyEdits(features).then(function(addResults) {
            var objectIds = array.map(addResults, function(addResult) {
                return addResult.objectId;
            });

            var q = new Query();
            q.objectIds = objectIds;

            featureLayer.selectFeatures(q).then(function(features) {
                main.openForm(features);
            });
        });

    });

},

The drawingToolbar in the startEditing function above is provided by the ESRI Javascript API, but handles the onClick event internally and passes it onto the onDrawEnd event that I am handling in my code. I have other code that handles the onClick event directly and it also fires twice.

UPDATE

I just tested the same functionality on my Android smartphone and it is also firing the onClick event twice with a single tap.

Answer 1

I have the exact same issue in an application I am building. I am also using the ESRI Javascript API.

I feel like there must be an event handler in either the map, the feature layer, or one of the dijit containers that passes along a tap event differently than the click.

In the end, I just debounced my click handler as described here: http://unscriptable.com/2009/03/20/debouncing-javascript-methods/