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

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

06.05.2019 05:33:54 Просмотров 33 Источник

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

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

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

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

(...)

stopPropagation(e) {
  e.stopPropagation()
}

Выше див (.действия) - это основной div всплывающего окна.

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

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

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

Обновление: на самом деле, не имеет значения, где во всплывающем окне происходит щелчок, он всегда распространяется на карту позади.

У вопроса есть решение - Посмотреть?

Ответы - Как остановить распространение кликов при нажатии на всплывающее окно листовки? / How to stop click propagation when clicking on a leaflet popup?

user2718281

07.05.2019 03:56:51

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

Возможноstop

https://stackoverflow.com/questions/56007320/how-to-stop-click-propagation-when-clicking-on-a-leaflet-popup/56014154#comment98681983_56014154
Спасибо за ответ. Это имеет полный смысл, но, к сожалению, не работает для меня. Щелчок все еще распространяется.
Является ответом!
pharaohlxvi

09.05.2019 12:22:05

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

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

(...)

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

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

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

RiggerTheGeek

28.01.2020 11:11:04

Принятый ответ не сработал для меня, поэтому я завернул свою l-карту в div и применил click.stopна этом.

<div @click.stop.prevent.self="">
  <l-map...>
</div>

Мне кажется, что фактическое событие click анализируется библиотекой листовок, а не Vue-совместимой Vue-2-листовкой, поэтому событие, полученное функцией, не имеет stopPropagationpreventDefault для объекта. Таким образом, когда вю называет их с.preventDefaultили .stop, двигатель JS выдает ошибку.

Закрыть X