leaflet - Fastclick.js导致Leaflet.js点击被忽略

我正在开发一个Cordova应用程序，该应用程序的核心是使用Leafletjs构建的 map 。 map 上有一些标记，单击这些标记会弹出一个信息框。

我想摆脱一般站点周围链接的300毫秒延迟-基本上是所有 anchor (a标签)上的延迟。我不需要将其应用于Leafletjs标记，因为当前用户点击标记时没有延迟。

我已经安装了fastclick(https://github.com/ftlabs/fastclick/)-它巧妙地消除了a标签的延迟-但是它在Leafletjs标记上造成了问题，该标记现在有时需要两声触发。

我试过在Leafletjs创建的标记上添加“needsclick”类，根据fastclick文档，该标记应使Fastclick忽略它们-但是似乎没有任何影响。 (例子:)

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

由于leafletjs标记的click事件位于img而不是标签上，因此，如果我可以仅将Fastclick附加到标签上，我认为这可以解决我的问题，但是我尝试将标签作为图层传递给Fastclick，但这也不起作用。 (例子:)

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

这是一个演示行为的最小jsfiddle(需要iDevice):https://jsfiddle.net/y723oet0/2/

如果有人有任何建议，将不胜感激。

最佳答案

fastclick.js保留一个名为this.targetElement的内部变量，该变量跟踪您当前正在点击的元素。触发touchend事件时，fastclick.js会检查触摸结束的元素是否与触摸开始的元素相同。

在 map 上进行正常的新点击后，this.targetElement开始为null，一切正常。如果快速点击元素，则this.targetElement = <a>并停留在该状态，这将导致fastclick.js内部函数onMouse拒绝下一次 map 单击。

我们通过修改fastclick.js来解决此问题，如下所示:

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

此补丁会导致在 map 外部开始的this.targetElement事件上清除touchend变量，以便不会阻止 map 上的下一个点击。

关于leaflet - Fastclick.js导致Leaflet.js点击被忽略，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28197921/