Javascript 传单:don';t双击时触发单击事件函数
我有一个关于在传单上点击地图的问题。如果我点击地图,我想在那里设置一个标记,但是如果双击地图,我只想放大而不设置标记。所以我有以下代码:Javascript 传单:don';t双击时触发单击事件函数,javascript,leaflet,Javascript,Leaflet,我有一个关于在传单上点击地图的问题。如果我点击地图,我想在那里设置一个标记,但是如果双击地图,我只想放大而不设置标记。所以我有以下代码: var map = L.map(attrs.id, { center: [scope.lat, scope.lng], zoom: 14 }); var marker = L.marker([scope.lat, scope.lng],{draggable: true}); map.on('cli
var map = L.map(attrs.id, {
center: [scope.lat, scope.lng],
zoom: 14
});
var marker = L.marker([scope.lat, scope.lng],{draggable: true});
map.on('click', function(event){
marker.setLatLng(event.latlng);
marker.addTo(map);
});
现在的问题是,当我双击地图时,单击事件也会被触发,我想删除该行为。我怎样才能做到这一点
谢谢
Magda所以,我找到了一种方法,我仍然不确定是否有更好的方法
var map = L.map(attrs.id, {
center: [scope.lat, scope.lng],
zoom: 14
});
map.clicked = 0;
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
var marker = L.marker([scope.lat, scope.lng],{draggable: true});
map.on('click', function(event){
map.clicked = map.clicked + 1;
setTimeout(function(){
if(map.clicked == 1){
marker.setLatLng(event.latlng);
marker.addTo(map);
map.clicked = 0;
}
}, 300);
});
map.on('dblclick', function(event){
map.clicked = 0;
map.zoomIn();
});
在侦听
dblclick
时,出现了两个不需要的单击事件触发的相同问题
注意:我想要在同一个元素上单击和双击以执行不同的操作
我将这种方法应用于我的传单地图,它不是防弹的,但消除了99%的冲突:
var timer = 0;
var delay = 200;
var prevent = false;
$("#target")
.on("click", function() {
timer = setTimeout(function() {
if (!prevent) {
doClickAction();
}
prevent = false;
}, delay);
})
.on("dblclick", function() {
clearTimeout(timer);
prevent = true;
doDoubleClickAction();
});
学分:
这仍然是最新版本(传单1.4)的一个问题
我使用的替代方法是:
- 合法使用
setTimeout
和cleartimout
- 不向地图对象添加随机道具
- 没有jQuery:
请注意,必须测试200
ms延迟。在我的环境中,仅使用100
这样的值是不够的,因为双击事件会延迟触发。请查看,您可能会找到您所关注的事件;)我从未使用过传单,所以我不知道它是否已经支持这一点,但您可能正在寻找的技术称为。本质上,延迟放置标记,如果在此期间发生另一个单击事件,请放大。@ScottKaye:谢谢你的回答-我按照你的建议使用了延迟。请不要将解决方案作为问题的编辑发布。你可以发布自己问题的答案。嗨@Keul。我刚刚发布了一个问题,涉及您在R中描述的内容的正确实现。理想情况下,我希望单击一下启动flyToBounds()函数,双击仍然只是缩放。不知道如何在这里发布问题的链接,但它在我的个人资料中。任何帮助都将不胜感激!
map.on('click', function(event) {
if (_dblClickTimer !== null) {
return;
}
_dblClickTimer = setTimeout(() => {
// real 'click' event handler here
_dblClickTimer = null;
}, 200);
})
.on("dblclick", function() {
clearTimeout(_dblClickTimer);
_dblClickTimer = null;
// real 'dblclick' handler here (if any). Do not add anything to just have the default zoom behavior
});