Vue2leaflet: @stop and @prevent not working on CircleMarker

[maratumba]

Description

Can not stop propagation or prevent default on circle marker clicks. @click.stop and/or @click.prevent throw errors. Original event seems to be in an object called $event.originalEvent but calling preventDefault() and stopPropagation() doesn't have any effect on it.

Live Demo

https://jsfiddle.net/gulyamani/541bpcja/1/

Steps to Reproduce

Open console and click circle markers.

Expected Results

Only seeing 'marker click' on console.

Actual Results

Seeing both 'marker click' and 'map click'

Browsers Affected

• [x] Chrome
• [x] Firefox
• [ ] Edge
• [ ] Safari 9
• [ ] Safari 8
• [ ] IE 11

Versions

• Leaflet: v1.6.0
• Vue: v2.5.16
• Vue2Leaflet: v2.2.1

[DonNicoJs]

This is a nice catch @maratumba I think we need to modify how we handle events to achieve this

[elmatou]

Hi
@DonNicoJs any reason you use DomEvent.on ti attach listeners to Leaflet object ?

As these are 'Interactive layer' we could ( and I think should, in order to solve this issue) use on from Evented class.
I noticed this while attaching different handler on Marker, Polyline and Map. I always have both handlers called (as in an event propagation) with Vue2Leaflet, and never when I a attach directly to mapObject

I would recommend to swap
DomEvent.on(this.mapObject, this.$listeners);
by
this.mapObject.on(this.$listeners);