传单：不要在双击时触发点击事件功能答案

【问题标题】：leaflet: don't fire click event function on doubleclick传单：不要在双击时触发点击事件功能
【发布时间】：2019-02-13 19:41:16
【问题描述】：

我有一个关于点击传单中地图的问题。如果我点击地图我想在那里设置一个标记，但如果我双击地图我只想放大而不设置标记。所以我有以下代码：

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);                
        });

现在的问题是，当我在地图上双击时，点击事件也会被触发，我想删除该行为。我怎样才能做到这一点？

谢谢玛格达

【问题讨论】：

请查看MDN Event reference，您可能会找到您所关注的事件；)
我从未使用过传单，所以我不知道它是否已经支持这一点，但您可能正在寻找的技术称为debouncing。本质上，延迟放置标记，如果在此期间发生另一个点击事件，则放大。
@ScottKaye：感谢您的回答 - 正如您建议的那样，我使用了延迟。
请不要将解决方案发布为对问题的编辑。您可以针对自己的问题发布答案。

标签： javascript leaflet

【解决方案1】：

所以，我找到了一种方法来做到这一点，但我仍然不确定是否有更好的方法来做到这一点。

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();
});

【讨论】：

【解决方案2】：

在侦听 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-Tricks

Code Pen Example

【讨论】：

【解决方案3】：

这仍然是最近（传单 1.4）版本的问题。

我使用的替代方法：

setTimeout 和 clearTimeout 的合法使用
不向地图对象添加随机道具
没有 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 ms 延迟必须经过测试。在我的环境中，使用像 100 这样的值是不够的，因为双击事件会延迟触发。

【讨论】：

嗨@Keul。我刚刚发布了一个问题，处理您在 R 中描述的内容的正确实现。理想情况下，我希望单击以启动 flyToBounds() 函数，然后双击以仍然只是缩放。不知道如何在此处发布问题的链接，但它在我的个人资料中。任何帮助将不胜感激！