繁体   English   中英

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

[英]Fastclick.js causes Leaflet.js clicks to be ignored

我正在开发一个Cordova应用程序,它的核心是Leafletjs构建的地图。 地图上有标记,点击后会弹出一个信息框。

我想摆脱网站周围链接的300毫秒延迟 - 基本上在所有锚点(标签)上。 我不需要将它应用于Leafletjs标记,因为当用户点击标记时,当前没有延迟。

我已经安装了fastclick( https://github.com/ftlabs/fastclick/ ) - 它很好地消除了标签的延迟 - 但是它在Leafletjs标记上产生了问题,现在有时需要两个标记才能触发。

我已经尝试在Leafletjs创建的标记上添加类'needsclick',根据fastclick文档应该使Fastclick忽略它们 - 但它似乎没有任何影响。 (例:)

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

由于leafletjs标记单击事件是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会检查触摸结束的元素是否与触摸开始的元素相同。

在地图上的正常新点击时, this.targetElement以null开头,一切正常。 如果快速点击该元素,则this.targetElement = <a>并停留在该状态,这会导致fastMlick.js内部函数onMouse拒绝下一个地图点击。

我们通过修改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

此修补程序会导致this.targetElement变量在地图外部开始的touchend事件中清除,以便下一次点击地图不会被阻止。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM