Как добавить обработчик двойного клика на попап 2gis?

Question

[danilr]

mounted(){
    DG.then(() => {
      this.map = DG.map('map-developer', {
        center: [55.00545, 82.96038],
        zoom: 14,
        zoomControl: false,
        minZoom: 11,
        fullscreenControl: false,
        scrollWheelZoom: false
      });
    this.markers = DG.featureGroup();

    for (var i = 0; i < this.residentials.length; i++) {
      const myDivIcon = DG.divIcon({
        className: "marker-custom",
        html: `<div class="marker-wrapper marker-active" data-id="${this.residentials[i].id}">
                <div class="marker-content">
                  <div class="marker-title">${this.residentials[i].name}</div>
                  <div class="marker-address">${this.residentials[i].address}</div>
                  <div class="marker-decor"></div>
                </div>
              </div>`
      });
      const popupContent = `<div class="marker-wrapper popup-marker" data-id="${this.residentials[i].id}">
                              <div class="marker-content">
                                <div class="marker-title">${this.residentials[i].name}</div>
                                <div class="marker-address">${this.residentials[i].address}</div>
                                <div class="marker-decor"></div>
                              </div>
                            </div>`

      const popupMap = DG.popup({ // для стилизации попапа нужно перебивать стоковые стили 2гис!
        className: "test-name", // пустой класс для удаления стокового класса со стилями 2гис
        closeButton: false,
        offset: DG.point(0 ,10) // отступ ножки, в Px, находится подбором
      }).setContent(popupContent).on('dblclick', (e) => { console.log('qqqqqqqqqqqqqq');});

      DG.marker([this.residentials[i].latitude, this.residentials[i].longitude], { icon: myDivIcon })
      .addTo(this.markers)
      .bindPopup(popupMap).on('click', (event) => {
        console.log('click: ');
        if (event.originalEvent.target.closest("[data-id]")) {
						const residentialId = Number(   
							event.originalEvent.target.closest("[data-id]").dataset.id
            );
            const route = this.residentials.find(rc => rc.id === residentialId).route;
            this.$emit('click-marker', route);
          }
        // this.map.setView([event.latlng.lat, event.latlng.lng]);
      }).on('dblclick', (event => {
        console.log('dblclick: ', dblclick);

      }))

    }

    DG.control.zoom({position: 'topright'}).addTo(this.map);

    this.markers.addTo(this.map);
    this.map.fitBounds(this.markers.getBounds());
    });
  }

Вот тут пытался навесить обработчик двойного клика по попапу, но не работает. Если сделать просто 'click', то всё работает:

.setContent(popupContent).on('dblclick', (e) => { console.log('qqqqqqqqqqqqqq');});

Как всё-таки сделать даблклик?

Comments

[n1ksON]

Ахах, как вариант можете в клике сделать ещё один обработчик события "click".

[danilr]

n1ksON, можете показать как?

Answer 1

[n1ksON]

Грубо говоря это должно выглядеть так:

$('.setContent').click(function() {
    $('.setContent').click(function() {
        console.log('123');
    });
});

На jQuery должно быть рабочий вариант. На чистом JS думаю сами справитесь.

Answer 2

[0xD34F]

Что, не хочет добавляться обработчик? Видимо, такой возможности не предусмотрено в 2gis api. Давайте закостылим - добавим его нативными средствами. Ну, почти. Так как элемент popup'а создаётся при его первом открытии, понадобится однократно срабатывающий обработчик popupopen, в котором будет выполняться назначение обработчика dblclick.

Добавляете компоненту методы:

methods: {
  onPopupOpen(e) {
    e.target
      .getPopup()
      .getElement()
      .querySelector('.leaflet-popup-content-wrapper')
      .addEventListener('dblclick', this.onPopupDblClick);
  },
  onPopupDblClick(e) {
    const
      id = +e.currentTarget.querySelector('[data-id]').dataset.id,
      // теперь, зная id, можно найти соответствующий объект
    ...

А создаваемым маркерам обработчик:

.once('popupopen', this.onPopupOpen)

https://jsfiddle.net/3jz059mb/