Schaltfläche in der Broschüre L.control()-Element reagiert nicht ⇐ HTML

[Guest]

Ich möchte einer L.control()-Infobox in einer Prospektkarte eine Schaltfläche hinzufügen. Egal, was der ursprüngliche Zweck des Buttons war, jetzt möchte ich nur noch wissen, warum das nicht funktioniert (

Code: Select all

info.buttonClicked()

wird nicht aufgerufen, wenn auf die Schaltfläche geklickt wird):

Code: Select all

let map;

map = L.map("map").setView([45.0, 0.0], 8);

var tiles = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
maxZoom: 19,
}).addTo(map);

let info = L.control();

info.onAdd = function (map) {
this._div = L.DomUtil.create("div", "info");

var button = L.DomUtil.create('button', 'close-btn', this._div);
button.innerHTML = 'x';
button.style.float = 'right';

button.addEventListener('click', function() {
console.log('buttonClicked event');
info.buttonClicked();
});

this._div.innerHTML += "some info";

return this._div;
};

info.buttonClicked = function() {
console.log('info.buttonClicked() called');
//this._div.innerHTML += '';
};

info.addTo(map);

(vollständiges Beispiel hier), während dies funktioniert (der Rest des Codes ist derselbe):

Code: Select all

info.onAdd = function (map) {
this._div = L.DomUtil.create("div", "info");

this._div.innerHTML = 'x';
this._div.innerHTML += "some info";

return this._div;
};

Im ersten Fall sehe ich keine Fehlermeldungen, aber es passiert nichts. Warum?
HINWEIS: Das Hinzufügen von L.DomEvent.disableClickPropagation(this._div);, wie in einer der Antworten unten vorgeschlagen, behebt dieses Problem nicht.