leaflet:不要在doubleclick上触发click事件功能

时间:2015-03-13 15:17:06

标签: 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('click', function(event){
            marker.setLatLng(event.latlng);
            marker.addTo(map);                
        });

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

由于 玛格达

3 个答案:

答案 0 :(得分:6)

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

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

答案 1 :(得分:1)

在听click时发生2 x个不需要的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();
  });

信用:CSS-Tricks

Code Pen Example

答案 2 :(得分:0)

在最新版本(传单1.4)上,这仍然是一个问题。

我使用的替代方法:

  • setTimeoutclearTimeout的合法用法
  • 不向地图对象添加随机道具
  • 没有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之类的值是不够的,因为doubleclick事件是延迟触发的。