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

前端之家收集整理的这篇文章主要介绍了Fastclick.js会导致Leaflet.js的点击被忽略前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在开发一个Cordova应用程序,该应用程序在其核心部分使用Leafletjs制作的地图.该地图有标记,当点击时弹出一个信息框.

我想摆脱网站周围链接的300ms延迟 – 基本上都是所有的锚点(标签).我不需要将它应用于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的内部变量,跟踪您当前正在点击的元素.触发事件触发时,fastclick.js检查触摸结束的元素是否与触摸开始的元素相同.

在地图上的正常新点击,this.targetElement开始为空,一切正常.如果快速轻击元素,那么this.targetElement =< a>并停留在该状态,这会导致鼠标中的fastclick.js内部函数拒绝下一个地图点击.

我们通过修改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事件中被清除,以便地图上的下一个点击不被阻止.

原文链接:https://www.f2er.com/js/153890.html

猜你在找的JavaScript相关文章