Как остановить распространение кликов при нажатии на всплывающую листовку?

Question

У меня есть всплывающее окно на листовой карте, которое можно закрыть, нажав на «х» в правом верхнем углу. Как сделать так, чтобы событие щелчка не распространялось на саму карту?

Я пытался использовать protectPropagate () во многих местах и ​​формах, но ни одна из них, похоже, не работает.

Мой последний код выглядит так:

<div class="actions" @click="stopPropagation($event)">

(...)

stopPropagation(e) {
  e.stopPropagation()
}

Приведенный выше div (.actions) является основным div всплывающего окна.

Я также пытался вызывать функцию по щелчку в теге компонента всплывающего окна в родительском компоненте, но результат был таким же, то есть нажатие на «х» закрывает всплывающее окно, как и ожидалось, но также приводит к событию щелчка в карта, которая лежит позади.

Я использую Vue и vue2-листовку.

Я ценю любую информацию от вас, ребята. Спасибо!

ОБНОВЛЕНИЕ: фактически, не имеет значения, где во всплывающем окне происходит щелчок, оно всегда распространяется на карту позади.

Answer 1

Итак, для справки, вот мое решение:

<div class="actions" @click="someMethod($event)">

(...)

someMethod(e) {
  (... some code)
  return false
}

Команда return false - вот что решило мою проблему.

Я попытался использовать '@ click.stop', но он выдает ошибку '$ event.stopPropagation () - это не функция'. То же самое происходит, если я запускаю 'e.stopPropagation ()' изнутри функции.

Answer 2

Можно попробовать модификатор события

Возможно модификатор stop:

<div class="actions" @click.stop="closePopup">