Fastclick.js causes Leaflet.js clicks to be ignored

Question

I am developing a Cordova app which has a map built with Leafletjs at the heart of it. The map has markers which when clicked pop up an info box.

I want to get rid of the 300ms delay on links around the site in general - basically on all of the anchors (a tags). I don't need to apply it to the Leafletjs markers because there is currently no delay when a user taps a marker.

I have installed fastclick (https://github.com/ftlabs/fastclick/) - it removed the delay from the a tags brilliantly - however it created problems on the Leafletjs markers which now sometimes need two cicks to fire.

I have tried adding the class 'needsclick' on the markers Leafletjs creates which according to the fastclick documentation should make Fastclick ignore them - however it does not seem to have any affect. (Example:)

$('.leaflet-marker-icon').addClass('needsclick');
$(function() {
    FastClick.attach(document.body);
});

As the leafletjs markers click events are on img rather than a tags, if I could attach Fastclick to only a tags I think this would fix my issue, however I have tried passing a tags as the layer to Fastclick but this doesn't work either. (Example:)

$(function() {
    var Anchors = document.getElementsByTagName("a");
    FastClick.attach(Anchors);
});

Here is a minimal jsfiddle demonstrating the behavior (requires iDevice): https://jsfiddle.net/y723oet0/2/

If anyone has any advice, it would be appreciated.

Answer 1

fastclick.js keeps an internal variable called this.targetElement that keeps track of the element that you are currently tapping on. When the touchend event fires, fastclick.js checks to see if the element that the touch ended on is the same as the element the touch began on.

On normal new clicks on the map, this.targetElement starts out as null and everything works properly. If the element is tapped quickly, then this.targetElement = <a> and is stuck on that state, which causes the fastclick.js internal function onMouse to reject the next map click.

We worked around this by modifying fastclick.js as follows:

diff --git a/fastclick.js b/fastclick.js
--- a/fastclick.js
+++ b/fastclick.js
@@ -606,6 +606,8 @@
                        this.sendClick(targetElement, event);
                }

+               this.targetElement = null;
+
                return false;
        };

// end of patch - don't copy this line

This patch causes the this.targetElement variable to be cleared on the touchend event that began outside the map so that the next tap on the map does not get blocked.