diff --git a/src/ol/PluggableMap.js b/src/ol/PluggableMap.js index fac2b185e2..75c1f4a7be 100644 --- a/src/ol/PluggableMap.js +++ b/src/ol/PluggableMap.js @@ -932,13 +932,15 @@ class PluggableMap extends BaseObject { // coordinates so interactions cannot be used. return; } - let target = /** @type {Node} */ (mapBrowserEvent.originalEvent.target); + const target = /** @type {Node} */ (mapBrowserEvent.originalEvent.target); if (!mapBrowserEvent.dragging) { - while (target && target !== this.viewport_) { - if (target.parentElement === this.overlayContainerStopEvent_) { - return; - } - target = target.parentElement; + if (this.overlayContainerStopEvent_.contains(target) || !document.body.contains(target)) { + // Abort if the event target is a child of the container that doesn't allow + // event propagation or is no longer in the page. It's possible for the target to no longer + // be in the page if it has been removed in an event listener, this might happen in a Control + // that recreates it's content based on user interaction either manually or via a render + // in something like https://reactjs.org/ + return; } } mapBrowserEvent.frameState = this.frameState_; diff --git a/test/spec/ol/interaction/draw.test.js b/test/spec/ol/interaction/draw.test.js index 7a12b66887..fc571891d8 100644 --- a/test/spec/ol/interaction/draw.test.js +++ b/test/spec/ol/interaction/draw.test.js @@ -15,7 +15,6 @@ import Polygon from '../../../../src/ol/geom/Polygon.js'; import Draw, {createRegularPolygon, createBox} from '../../../../src/ol/interaction/Draw.js'; import Interaction from '../../../../src/ol/interaction/Interaction.js'; import VectorLayer from '../../../../src/ol/layer/Vector.js'; -import Event from '../../../../src/ol/events/Event.js'; import VectorSource from '../../../../src/ol/source/Vector.js'; import {clearUserProjection, setUserProjection, transform} from '../../../../src/ol/proj.js'; import {register} from '../../../../src/ol/proj/proj4.js'; @@ -73,8 +72,9 @@ describe('ol.interaction.Draw', function() { // calculated in case body has top < 0 (test runner with small window) const position = viewport.getBoundingClientRect(); const shiftKey = opt_shiftKey !== undefined ? opt_shiftKey : false; - const event = new Event(); + const event = {}; event.type = type; + event.target = viewport.firstChild; event.clientX = position.left + x + width / 2; event.clientY = position.top + y + height / 2; event.shiftKey = shiftKey; diff --git a/test/spec/ol/interaction/extent.test.js b/test/spec/ol/interaction/extent.test.js index 56fd15765e..63fc0e59c9 100644 --- a/test/spec/ol/interaction/extent.test.js +++ b/test/spec/ol/interaction/extent.test.js @@ -2,7 +2,6 @@ import Map from '../../../../src/ol/Map.js'; import MapBrowserPointerEvent from '../../../../src/ol/MapBrowserPointerEvent.js'; import View from '../../../../src/ol/View.js'; import ExtentInteraction from '../../../../src/ol/interaction/Extent.js'; -import Event from '../../../../src/ol/events/Event.js'; describe('ol.interaction.Extent', function() { let map, interaction; @@ -50,8 +49,9 @@ describe('ol.interaction.Extent', function() { // calculated in case body has top < 0 (test runner with small window) const position = viewport.getBoundingClientRect(); const shiftKey = opt_shiftKey !== undefined ? opt_shiftKey : false; - const pointerEvent = new Event(); + const pointerEvent = {}; pointerEvent.type = type; + pointerEvent.target = viewport.firstChild; pointerEvent.button = button; pointerEvent.clientX = position.left + x + width / 2; pointerEvent.clientY = position.top - y + height / 2; diff --git a/test/spec/ol/interaction/modify.test.js b/test/spec/ol/interaction/modify.test.js index 7deae8d5d7..18b2c28063 100644 --- a/test/spec/ol/interaction/modify.test.js +++ b/test/spec/ol/interaction/modify.test.js @@ -84,6 +84,7 @@ describe('ol.interaction.Modify', function() { const position = viewport.getBoundingClientRect(); const pointerEvent = new Event(); pointerEvent.type = type; + pointerEvent.target = viewport.firstChild; pointerEvent.clientX = position.left + x + width / 2; pointerEvent.clientY = position.top + y + height / 2; pointerEvent.shiftKey = modifiers.shift || false; diff --git a/test/spec/ol/interaction/select.test.js b/test/spec/ol/interaction/select.test.js index 50f7bb2c70..e64eb2dc28 100644 --- a/test/spec/ol/interaction/select.test.js +++ b/test/spec/ol/interaction/select.test.js @@ -91,11 +91,13 @@ describe('ol.interaction.Select', function() { // calculated in case body has top < 0 (test runner with small window) const position = viewport.getBoundingClientRect(); const shiftKey = opt_shiftKey !== undefined ? opt_shiftKey : false; - const event = new PointerEvent(type, { + const event = { + type: type, + target: viewport.firstChild, clientX: position.left + x + width / 2, clientY: position.top + y + height / 2, shiftKey: shiftKey - }); + }; map.handleMapBrowserEvent(new MapBrowserPointerEvent(type, map, event)); } diff --git a/test/spec/ol/interaction/translate.test.js b/test/spec/ol/interaction/translate.test.js index a3df2ccebe..79efde34bb 100644 --- a/test/spec/ol/interaction/translate.test.js +++ b/test/spec/ol/interaction/translate.test.js @@ -65,13 +65,15 @@ describe('ol.interaction.Translate', function() { // calculated in case body has top < 0 (test runner with small window) const position = viewport.getBoundingClientRect(); const shiftKey = opt_shiftKey !== undefined ? opt_shiftKey : false; - const event = new MapBrowserPointerEvent(type, map, - new PointerEvent(type, { - clientX: position.left + x + width / 2, - clientY: position.top + y + height / 2, - shiftKey: shiftKey, - preventDefault: function() {} - })); + const event = new MapBrowserPointerEvent(type, map, { + type: type, + target: viewport.firstChild, + pointerId: 0, + clientX: position.left + x + width / 2, + clientY: position.top + y + height / 2, + shiftKey: shiftKey, + preventDefault: function() {} + }); map.handleMapBrowserEvent(event); }