5

I have a feature layer and some pins on it, with mouseout, mouseover events callbacks on the feature. When the mouse is over the pin icon, that triggers mouseout event (mouseout from the feature layer). I am trying to stop event propagation but nothing works.

How can the leaflet event propagation be stopped?

None of those worked:

DomEvent.stopPropagation(e);
DomEvent.preventDefault(e);
DomEvent.stop(e);
stopPropagation(e.originalEvent);
preventDefault(e.originalEvent);
stop(e.originalEvent); 
2

3 Answers 3

3

Okay, finally got it figured out on stopping the propagation of events. e.g.

someReference.on("click", (evt: L.LeafletEvent) => {
    // You don't try to reference the event (evt) that is passed in

    L.DomEvent.preventDefault(evt); // Just call this
    ...
})
1
  • This prevents the DOM event from propagating outside of leaflet, but doesn't seem to prevent leaflet itself from propagating the click through its own layers, which requires the bubblingMouseEvents on your marker to be set to false. Commented Dec 19, 2023 at 18:26
2

If you're interested in stopping propagation for a Marker, you can just set bubblingMouseEvents to false in the options: https://leafletjs.com/reference.html#marker-bubblingmouseevents

1

I tried a lot of solutions offered here and at other questions, and only this worked for me:

L.DomEvent.stopPropagation(ev);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.