disableClickPropagation does not prevent events on elements' features…

… (and child elements)
Leaflet · Nov 7, 2021 · 7172b7c · 7172b7c
1 parent 3ce36bc
commit 7172b7c
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 4 deletions.
diff --git a/spec/suites/dom/DomEventSpec.js b/spec/suites/dom/DomEventSpec.js
@@ -301,7 +301,7 @@ describe('DomEvent', function () {
 	});
 
 	describe('#disableClickPropagation', function () {
-		it('stops click events from propagation to parent elements', function () { // except 'click'
+		it('does not stop click events from propagation to parent HTML elements', function () {
 			var child = document.createElement('div');
 			el.appendChild(child);
 			L.DomEvent.disableClickPropagation(child);
@@ -312,6 +312,51 @@ describe('DomEvent', function () {
 			happen.once(child, {type: 'mousedown'});
 			happen.once(child, {type: 'touchstart', touches: []});
 
+			expect(listener.callCount).to.be(L.Browser.touchNative ? 4 : 3);
+		});
+
+		it('does not stop click events from firing on feature itself', function () {
+			var map = L.map(el, {zoom:0, center:[0, 0]});
+			var layer = new L.Layer();
+			layer.onAdd = layer.onRemove = L.Util.falseFn;
+			layer.addTo(map);
+
+			var child = document.createElement('div');
+			el.appendChild(child);
+			layer.addInteractiveTarget(child);
+
+			L.DomEvent.disableClickPropagation(child);
+			layer.on('click dblclick contextmenu mousedown', listener);
+
+			happen.once(child, {type: 'click'});
+			happen.once(child, {type: 'dblclick'});
+			happen.once(child, {type: 'contextmenu'});
+			happen.once(child, {type: 'mousedown'});
+
+			map.remove(); // cleanup
+			expect(listener.callCount).to.be(4);
+		});
+
+		it('stops click events from propagation to parent features', function () {
+			var map = L.map(el, {zoom:0, center:[0, 0]});
+			var layer = new L.Layer();
+			layer.onAdd = layer.onRemove = L.Util.falseFn;
+			layer.addTo(map);
+
+			var child = document.createElement('div');
+			el.appendChild(child);
+			layer.addInteractiveTarget(child);
+
+			L.DomEvent.disableClickPropagation(child);
+			map.on('preclick click dblclick contextmenu mousedown', listener);
+
+			happen.once(child, {type: 'preclick'});
+			happen.once(child, {type: 'click'});
+			happen.once(child, {type: 'dblclick'});
+			happen.once(child, {type: 'contextmenu'});
+			happen.once(child, {type: 'mousedown'});
+
+			map.remove(); // cleanup
 			expect(listener.notCalled).to.be.ok();
 		});
 

diff --git a/src/dom/DomEvent.js b/src/dom/DomEvent.js
@@ -197,8 +197,10 @@ export function disableScrollPropagation(el) {
 // Adds `stopPropagation` to the element's `'click'`, `'dblclick'`, `'contextmenu'`,
 // `'mousedown'` and `'touchstart'` events (plus browser variants).
 export function disableClickPropagation(el) {
-	on(el, 'mousedown touchstart dblclick contextmenu', stopPropagation);
-	el['_leaflet_disable_click'] = true;
+	if (!(el instanceof HTMLElement)) {
+		throw new Error('HTMLElement expected');
+	}
+	el['_leaflet_disable_click_propagation'] = true;
 	return this;
 }
 

diff --git a/src/map/Map.js b/src/map/Map.js
@@ -1340,6 +1340,8 @@ export var Map = Evented.extend({
 		}
 	},
 
+	_clickEvents: ['mousedown', 'touchstart', 'preclick', 'click', 'dblclick', 'contextmenu'],
+
 	_findEventTargets: function (e, type) {
 		var targets = [],
 		    target,
@@ -1350,7 +1352,7 @@ export var Map = Evented.extend({
 		var disablePropagation = false;
 		while (src) {
 			if (disablePropagation) { return targets; }
-			if (src['_leaflet_disable_click'] && (type === 'click' || type === 'preclick')) {
+			if (src['_leaflet_disable_click_propagation'] && this._clickEvents.indexOf(type) !== -1) {
 				disablePropagation = true;
 			}
 			target = this._targets[Util.stamp(src)];