Klicken Sie auf Leaflet Karte schließt Modal, klicken Sie auf Marker öffnet sich Modal

Question

Meine Leaflet Map hat Marker, die Modals öffnen.

Wenn ein Benutzer jedoch auf die Karte klickt, möchte ich, dass das Modal schließt. Aber das Stück Code, das (unten) geschehen läßt interagiert mit dem Marker, und zwingt sie so schnell zu schließen, wie es öffnet:

map.on('click', function(e) { 
$('.modal').modal('hide'); }); 

Ich habe dies die JSFiddle hier arbeiten gesehen haben: https://jsfiddle.net/askebos/Lh1y12uq/

Aber wie Sie sehen können, ist der einzige Grund, es zu funktionieren scheint, weil es den folgenden Fehler erzeugt:

Uncaught TypeError: e.preventDefault is not a function.

ich, dass es sich vorstellen, weil die map.on('click'...) Funktion von der Ausführung verhindert wird.

Irgendwelche Gedanken darüber, wie ich zum selben Verhalten ohne den Fehler kommen kann?

Answer 1

Die Lösung besteht darin, eine init() Funktion hinzuzufügen, die verfolgt, wenn ein Marker geklickt wird. Inspiration kam von dieser question.

Fügen Sie zunächst die init() Funktion zum Code:

function init() { 
    init.called = true; 
} 

dann die Funktion aufrufen, wenn die Markierung geklickt wird:

function markerOnClick(e) { 
    init(); 
... 
} 

eine Funktion machen, die ausgelöst wird, wenn die Karte geklickt wird, aber Fügen Sie eine if/else-Anweisung ein, die überprüft, ob init.called auf true festgelegt wurde. Wenn dies der Fall ist, setzen Sie init.called zurück. Wenn es nicht auf true eingestellt wurde, wurde die Karte an anderer Stelle angeklickt und alle Mods können geschlossen werden.

function mapClick() { 
if(init.called) { 
    init.called = false; 
} 
else{ 
    $('.modal').modal('hide'); 
} 
} 

Schließlich binden die mapClick Funktion Klicks abzubilden.

map.on('click', mapClick); 

Die Funktion wird die Marker-Klicks nicht mehr außer Kraft setzen, und der Fehler wurde ebenfalls behoben. Das sagt mir immer noch nicht, warum e.preventDefault einen Fehler verursacht hat, daher wären alle Erklärungen willkommen!

Ein funktionierender JSFiddle kann hier gefunden werden: https://jsfiddle.net/askebos/oesh59jr/