小冊子：雙擊不點擊事件功能

-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

小冊子：雙擊不點擊事件功能

回答

相關問題