vue-leaflet/Vue2Leaflet

@stop and @prevent not working on CircleMarker

Open

#548 opened on Feb 19, 2020

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (1,942 stars) (380 forks)batch import
bugconfirmedhelp wanted

Description

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

  • Chrome
  • Firefox
  • Edge
  • Safari 9
  • Safari 8
  • IE 11

Versions

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

Contributor guide

Tech stack
javascriptvue
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Vue event modifiersLeaflet event handling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
Investigate the CircleMarker component in Vue2Leaflet, likely in src/components/LCircleMarker.vue. Check how event listeners are bound; the issue suggests that @click.stop and @click.prevent do not work because the event is not being properly captured. Look for usage of L.circleMarker and event propagation handling. Perhaps the event is not passed correctly from Leaflet to Vue. Check if there is a mixin or base class handling events. Also review similar issues or PRs for event handling in Vue2Leaflet.