单击传单弹出窗口时如何停止单击传播？

Question

我在传单地图中有一个弹出窗口，可以通过单击其右上角的 'x' 将其关闭。如何使点击事件不传播到地图本身？

我已经尝试在许多地方和形式中使用 preventPropagate()，但其中 none 似乎有效。

我的最新代码如下所示：

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

(...)

stopPropagation(e) {
  e.stopPropagation()
}

上面的div(.actions)是弹窗的主要div.

我也试过在父组件中点击弹出窗口的组件标签时调用该函数，但结果是一样的，这意味着点击 'x' 会按预期关闭弹出窗口，但也会导致点击位于后面的地图中的事件。

我使用 Vue 和 vue2-leaflet。

感谢你们的任何见解。谢谢！

更新：实际上，无论点击发生在弹出窗口的哪个位置，它总是会传播到后面的地图。

Answer 1

可以试试 event modifier

也许 stop 修饰符：

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

Answer 2

因此，作为参考，这是我的解决方案：

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

(...)

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

命令 'return false' 解决了我的问题。

我尝试使用“@click.stop”，但出现“$event.stopPropagation() 不是函数”错误。如果我从函数内部运行 'e.stopPropagation()' 也会发生同样的情况。

Answer 3

已接受的答案对我不起作用，所以我将我的 l-map 包裹在 div 中并对其应用 click.stop。

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

在我看来，实际的点击事件是由传单库解析的，而不是由兼容 Vue 的 vue-2-leaflet 解析的，因此函数接收的事件没有 stopPropagation或对象上的 preventDefault 方法。因此，当 Vue 使用 .stop 或 .prevent 调用它们时，JS 引擎会抛出错误。

Answer 4

这就是我在处理事件处理和停止传播时遇到的问题。

例如

someReference.on("click", (evt: L.LeafletEvent) => {
    // You don't try to reference the event (evt) that is passed in
    L.DomEvent.stopPropagation; // Just call this and it kills the propagation

    // or you can call
    // L.DomEvent.preventDefault(evt);
    ...
})

单击传单弹出窗口时如何停止单击传播？

How to stop click propagation when clicking on a leaflet popup?

mouseevent

stoppropagation

leaflet

vue.js