Faltblatt: kein Feuer, klicken Sie auf Ereignis-Funktion auf doubleclick

Ich habe eine Frage bezüglich der Klicks auf einer Karte in der Broschüre. Wenn ich auf die Karte will ich um eine Markierung zu setzen gibt, aber wenn ein Doppelklick auf die Karte, ich will einfach nur, um zu vergrößern, ohne setzen einer Markierung. Also ich habe das mit folgendem code:

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

Das problem ist jetzt, wenn ich doublclick auf der Karte das click-Ereignis wird auch ausgelöst, und ich möchte zu entfernen, das Verhalten. Wie kann ich das erreichen?

Dank
Magda

  • bitte Lesen Sie MDN-Veranstaltungshinweis, vielleicht finden Sie hier das Ereignis, das Sie nach 😉
  • Ich habe noch nie gearbeitet, mit Prospekt, also weiß ich nicht ob es unterstützt dies bereits, aber die Technik, die Sie vielleicht suchen, für die ist entprellung. Im wesentlichen Verzögerung der Platzierung der marker, und wenn ein weiteres click-Ereignis geschieht während dieser Zeit, Sie zu vergrößern.
  • Vielen Dank für deine Antwort - ich habe eine Verzögerung, wie Sie vorgeschlagen.
  • Bitte veröffentlichen Sie keine Lösung als eine Bearbeiten, um die Frage. Sie können post eine Antwort, um Ihre eigenen Fragen.
InformationsquelleAutor Magda | 2015-03-13
  1. 6

    So, ich fand einen Weg, das zu tun, ich bin noch nicht sicher, ob es einen besseren Weg, es zu tun. 

    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();
});
    InformationsquelleAutor Magda
  2. 2

    Hatte das gleiche problem, 2 x unerwünschten click events feuern, wenn Zuhören für dblclick.

    Hinweis: ich wollte Einzel-und Doppel-klickt auf das gleiche element, um verschiedene Aktionen auszuführen.

    Angepasst ich dieses Konzept auf meine leaflet-Karte, die ist nicht kugelsicher, aber beseitigt 99% der Konflikte:

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

    Credit: CSS-Tricks

    Code-Stift-Beispiel

    InformationsquelleAutor danwild
  3. 0

    Dies ist immer noch ein Problem auf den letzten (Merkblatt 1.4) Versionen.

    Alternative Ansatz, den ich verwendet:

    • legit Nutzung von setTimeout und clearTimeout
    • ohne Zugabe zufällige Requisiten, um die map-Objekt
    • kein 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
});

    Beachten Sie, dass die 200 ms Verzögerung geprüft werden müssen. Auf meine Umwelt mit einem Wert wie 100 war nicht genug, wie das doubleclick-Ereignis wird ausgelöst, mit einer Verzögerung.

    InformationsquelleAutor keul
Schreibe einen Kommentar