Question

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

我尝试在许多地方和形式中使用preventPropagate（），但是似乎都不起作用。

我的最新代码如下：

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

(...)

stopPropagation(e) {
  e.stopPropagation()
}

上面的div（.actions）是弹出窗口的主要div。

我还尝试在父组件的弹出窗口的组件标签中单击以调用该函数，但是结果是相同的，这意味着单击“ x”会按预期关闭弹出窗口，但还会导致后面的地图。

我使用Vue和vue2-传单。

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

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

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或{对象上的{1}}方法。因此，当Vue用preventDefault或.stop调用它们时，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);
    ...
})

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

4 个答案: