DomEvent
Quick answer
L.DomEvent wraps native browser events for Leaflet controls and overlays, adding helpers for propagation control and coordinate reading. Use it instead of addEventListener when a control must stop clicks and wheel events from reaching the map beneath it. It also normalizes browser wheel deltas across engines.
L.DomEvent.on( el , types , fn , context ?) → this
Key points
- disableClickPropagation stops click, double click and context menu from bubbling to the map.
- disableScrollPropagation keeps wheel events over a control from zooming the map.
- getMousePosition returns pixel coordinates relative to the supplied container.
Example
var ZoomBox = L.Control.extend({
onAdd: function () {
var box = L.DomUtil.create('div', 'zoom-box');
box.innerHTML =
'<button data-step="1">放大</button>' +
'<button data-step="-1">缩小</button>';
L.DomEvent.disableClickPropagation(box);
L.DomEvent.disableScrollPropagation(box);
L.DomEvent.on(box, 'click', function (e) {
var step = Number(e.target.getAttribute('data-step'));
if (!step) { return; }
map.setZoom(map.getZoom() + step);
});
return box;
}
});
map.addControl(new ZoomBox({ position: 'topright' }));L.DomEvent.on(map.getContainer(), 'mousemove', function (e) {
var p = L.DomEvent.getMousePosition(e, map.getContainer());
hoverLabel.textContent = Math.round(p.x) + ', ' + Math.round(p.y);
});Notes
- Calling stopPropagation on the map container breaks dragging, zooming and click detection.
- DomEvent handles raw DOM events while L.Evented handles Leaflet objects carrying latlng.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). DomEvent. https://www.jingweizhi.com/en/leaflet/api/dom-event.html (accessed 2026-11-03).