UIMarker content support scroll when eventsPropagation=false (#2221)

* UIMarker content support scroll when eventsPropagation=false * fix lint
maptalks · Mar 14, 2024 · 0659e76 · 0659e76
1 parent 5d957e6
commit 0659e76
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 36 deletions.
diff --git a/src/ui/InfoWindow.js b/src/ui/InfoWindow.js
@@ -1,5 +1,5 @@
 import { isFunction, isNumber, isObject, isString } from '../core/util';
-import { createEl, addDomEvent, removeDomEvent, on, off } from '../core/util/dom';
+import { createEl, addDomEvent, removeDomEvent } from '../core/util/dom';
 import Coordinate from '../geo/Coordinate';
 import Point from '../geo/Point';
 import Size from '../geo/Size';
@@ -442,41 +442,6 @@ class InfoWindow extends UIComponent {
         return width;
     }
 
-    _bindDomEvents(dom, to) {
-        if (!dom) {
-            return;
-        }
-        const events = this._getDomEvents();
-        const bindEvent = to === 'on' ? on : off;
-        for (const eventName in events) {
-            bindEvent(dom, eventName, events[eventName], this);
-        }
-    }
-
-    _getDomEvents() {
-        return {
-            'mouseover': this._onDomMouseover,
-            'mouseout': this._onDomMouseout
-        };
-    }
-
-    // eslint-disable-next-line no-unused-vars
-    _onDomMouseover(domEvent) {
-        const map = this.getMap();
-        if (!map) {
-            return;
-        }
-        map.options['preventWheelScroll'] = false;
-    }
-
-    // eslint-disable-next-line no-unused-vars
-    _onDomMouseout(domEvent) {
-        const map = this.getMap();
-        if (!map) {
-            return;
-        }
-        map.options['preventWheelScroll'] = true;
-    }
 }
 
 InfoWindow.mergeOptions(options);

diff --git a/src/ui/UIComponent.js b/src/ui/UIComponent.js
@@ -888,6 +888,45 @@ class UIComponent extends Eventable(Class) {
         }
         return false;
     }
+
+    _bindDomEvents(dom, to) {
+        if (!dom) {
+            return;
+        }
+        const events = this._getDomEvents() || {};
+        const bindEvent = to === 'on' ? on : off;
+        for (const eventName in events) {
+            bindEvent(dom, eventName, events[eventName], this);
+        }
+    }
+
+    _getDomEvents() {
+        return {
+            'mouseover': this._onDomMouseover,
+            'mouseout': this._onDomMouseout
+        };
+    }
+
+    _configMapPreventWheelScroll(preventWheelScroll) {
+        const map = this.getMap();
+        if (!map) {
+            return;
+        }
+        if (this.options.eventsPropagation) {
+            return;
+        }
+        map.options['preventWheelScroll'] = preventWheelScroll;
+    }
+
+    // eslint-disable-next-line no-unused-vars
+    _onDomMouseover(domEvent) {
+        this._configMapPreventWheelScroll(false);
+    }
+
+    // eslint-disable-next-line no-unused-vars
+    _onDomMouseout(domEvent) {
+        this._configMapPreventWheelScroll(true);
+    }
 }
 
 UIComponent.mergeOptions(options);

diff --git a/src/ui/UIMarker.js b/src/ui/UIMarker.js
@@ -362,6 +362,8 @@ class UIMarker extends Handlerable(UIComponent) {
      * @return {HTMLElement} UIMarker's HTMLElement
      */
     buildOn() {
+        const oldDom = this.getDOM();
+        this._bindDomEvents(oldDom, 'off');
         let dom;
         const content = this.options['content'];
         const isStr = isString(content);
@@ -380,6 +382,7 @@ class UIMarker extends Handlerable(UIComponent) {
             dom.className = this.options['containerClass'];
         }
         this._registerDOMEvents(dom);
+        this._bindDomEvents(dom, 'on');
         return dom;
     }