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

Question

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

我尝试在许多地方和表格中使用destresspropagate((，但它们似乎都没有用。

我的最新代码看起来像：

<div class="actions" @click="stopPropagation($event)">
(...)
stopPropagation(e) {
  e.stopPropagation()
}

上述div(.actions(是弹出窗口的主div。

我还尝试了在父组件中单击弹出组件标签的单击中调用该功能，但是结果是相同的，这意味着单击" x"按预期关闭弹出窗口，但也导致单击事件。位于后面的地图。

我使用vue和vue2叶。

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

更新：实际上，在弹出窗口中的何处无关紧要，它总是会传播到后面的地图。

Answer 1

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

<div class="actions" @click="someMethod($event)">
(...)
someMethod(e) {
  (... some code)
  return false
}

命令"返回false"是解决我的问题的方法。

我尝试使用'@click.stop'，但它给了我'$ event.stoppropagation((不是函数'错误。如果我从函数内部运行'e.stoppropagation(('，也会发生同样的情况。

Answer 2

接受的答案对我不起作用，因此我将我的L-MAP包裹在DIV中，并将click.stop应用于此。

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

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

Answer 3

这是我为事件处理和停止传播的问题所弄清楚的。

，例如

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);
    ...
})

Answer 4

可以尝试事件修饰符

也许stop修饰符：

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