vue.jsleafletmouseeventstoppropagation

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

I have a popup in a leaflet map that can be closed by clicking on the 'x' in its upper right corner. How do I make the click event not propagate to the map itself?

I've tried using preventPropagate() in many places and forms, but none of them seem to work.

My latest code looks like that:

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

(...)

stopPropagation(e) {
  e.stopPropagation()
}

The above div (.actions) is the popup's main div.

I have also tried calling the function at a click in the popup's component tag in the parent component, but the result was the same, meaning clicking the 'x' closes the popup as expected but also results in a click event in the map that lies behind.

I use Vue and vue2-leaflet.

I appreciate any insight from you guys. Thanks!

UPDATE: actually, doesn't matter where in the popup the click happens, it always gets propagated to the map behind.

Solution

  • So, for reference, here's my solution:

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

(...)

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

    The command 'return false' is what solved my problem.

    I tried using '@click.stop', but it gives me the '$event.stopPropagation() is not a function' error. The same happens if I run 'e.stopPropagation()' from inside the function.