宣传单:双击时不要触发点击事件函数
Leaflet: don't fire a click event function on double-click
我有一个关于在传单中点击地图的问题。如果我点击地图,我想在那里设置一个标记,但如果我双击地图,我只想放大而不设置标记。所以我有以下代码:
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);
});
现在的问题是,当我双击地图时,单击事件也会被触发,我想删除该行为。我怎样才能做到这一点?
我找到了一种方法,但我仍然不确定是否有更好的方法可以做到这一点。
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
时遇到了 2 倍不需要的click
事件触发的相同问题。
注意:我希望对同一元素进行单击和双击以执行不同的操作。
我将这种方法改编到我的传单地图中,它不是防弹的,但消除了 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();
});
信用:CSS技巧
代码笔示例
这在最近的(Leaflet 1.4)版本中仍然是一个问题。
我使用的另一种方法:
- 合法使用
setTimeout
和clearTimeout
- 无需向地图对象添加随机道具
- no jQuery:
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
});
请注意,必须测试 200 毫秒的延迟。在我的环境中,使用像 100 这样的值是不够的,因为双击事件是延迟触发的。
相关文章:
- 无法在java脚本中调用图像的点击事件函数
- 如何在事件函数中访问窗口实例
- 事件函数完整日历中的多个ajax调用
- 如何使参数在事件函数中工作
- Jquery Onclick 事件函数第二次不起作用
- 宣传单:双击时不要触发点击事件函数
- Bootstrap/JQuery-单选按钮组事件函数
- 将jQuery事件函数应用于新的Knockout.js数组元素
- 防止在元素上触发新事件,直到当前事件函数在jQuery中完成
- 有没有一种方法可以将多个参数传递给主干js中的事件函数
- 用javascript更新事件函数中的全局变量
- Jquery:如何在事件函数之外获取变量
- 将参数传递给事件函数
- postMessage - 多个 postMessage 事件/函数/回调
- 多事件函数中的悬停延迟
- JavaScript 事件函数 - 在声明之前调用
- 使用 jQuery 循环设置事件函数触发器
- 暂停,直到事件/函数使用 jquery 或 JavaScript 完成
- 如何访问 jQuery 事件函数中的对象属性
- 单击事件函数未从花式盒子灯箱内触发