Слушатель событий в Mapbox

Я добавил пользовательские кнопки на карту MapBox, и они правильно работают. Однако, когда я добавляю прослушиватель кликов, он не работает. Я не вижу ошибки в консоли.

Код выглядит так:

const currentLocationControl = new CustomControl('current-location-control', 'GPS');

this.map.addControl(currentLocationControl, 'top-left');

document.getElementById('test').addEventListener('click', function (e) {
    alert('test');
});

Я выполняю этот код в mounted методе из vue.js

Пользовательский контроль:

export default class CustomControl {

    constructor(className, text) {
        this.className = className;
        this.text = text;
    }

    onAdd(map){
        this.map = map;
        this.container = document.createElement('div');
        this.container.id = 'test';
        this.container.className = this.className;
        this.container.textContent = this.text;
        return this.container;
    }
    onRemove(){
        this.container.parentNode.removeChild(this.container);
        this.map = undefined;
    }
}

Когда я console.log(document.getElementById('test')); Я вижу ожидаемый результат в моей консоли (тестовый div).

Так что же здесь происходит?

Ответ 1

Возможно, элемент еще не существует, в зависимости от того, как работает map.addControl.

Возможно, если вы создали метод в своем CustomControl для возврата контейнера, и вместо использования document.getElementById вы бы использовали что-то вроде currentLocationControl.getContainer()?

Альтернативно, setAction в вашем CustomControl как

setAction(action) {
    this.container.addEventListener('click', action);
}

Ответ 2

Чтобы убедиться, что событие click привязано к правильному элементу, вы можете привязать событие в объявлении класса.

Передача обратного вызова для события кликов в CustomControl

const clickCallback = function(e) {
  alert(test);
};

const currentLocationControl = new CustomControl(
  "current-location-control",
  "GPS",
  clickCallback
);

Объявление класса:

// add clickCallback to constructor
export default class CustomControl {
  constructor(className, text, clickCallback) {
    //...
  }

  onAdd(map) {
    //...
    this.container.onclick = clickCallback;
    //...
  }
}