小册子：双击不点击事件功能

-1

我有一个关于点击小册子中的地图的问题。如果我点击地图，我想在那里设置一个标记，但是如果双击地图，我只想放大而不设置标记。所以我有follwing代码：小册子：双击不点击事件功能

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

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

感谢玛格达

来源

2015-03-13 Magda

请参阅[MDN事件参考]（https://developer.mozilla.org/en-US/docs/Web/Events），你可能只是找到你之后的事件;） – rlemon 2015-03-13 15:21:02

我从来没有使用传单，所以我不知道是否它已经支持这一点，但你可能会看起来很有技巧ng for被称为[debouncing]（http://davidwalsh.name/javascript-debounce-function）。实质上，延迟放置标记，并且如果在此期间发生另一个点击事件，请放大。 – Scott 2015-03-13 15:22:46

@ScottKaye：谢谢您的回答 - 我按照您的建议使用了延迟。 – Magda 2015-03-13 16:18:00

于是，我找到了一种方法来做到这一点，我现在还不能确定，是否有更好的方式来做到这一点。

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

来源

2015-03-13 18:06:19 Magda

具有2×不必要click事件侦听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

来源

2016-11-15 00:38:08 danwild

小册子：双击不点击事件功能

回答

相关问题