Events and interaction
Quick answer
This tutorial explains the shared on, off and once interface that every Leaflet object inherits and dissects event object fields such as latlng, layerPoint, containerPoint and originalEvent. It demonstrates stopping propagation from markers and disabling bubblingMouseEvents, throttling move with requestAnimationFrame, and using layeradd plus map.remove for lifecycle cleanup. Readers can wire reliable interactions without duplicate or leaking listeners.
Key points
- Read e.latlng, e.layerPoint and e.containerPoint instead of recomputing positions yourself.
- Stop marker clicks with L.DomEvent.stopPropagation or bubblingMouseEvents: false.
- Throttle move and mousemove with requestAnimationFrame and prefer moveend and zoomend.
Example
marker.on('click', function (e) {
L.DomEvent.stopPropagation(e);
console.log('只处理标记点击');
});var pending = false;
map.on('move', function () {
if (pending) return;
pending = true;
requestAnimationFrame(function () {
pending = false;
var c = map.getCenter();
readout.textContent = c.lat.toFixed(5) + ', ' + c.lng.toFixed(5);
});
});Notes
- Layer mouse events bubble to the map by default, so one marker click can add two points.
- Anonymous callbacks cannot be removed with off; keep named functions and call map.remove().
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Events and interaction. https://www.jingweizhi.com/en/leaflet/tutorials/events.html (accessed 2026-11-03).