React中Devextreme VectorMap组件滚动触发页面滚动的问题

问题原因 #

即使通过zoomingEnabled={false}和panningEnabled={false}禁用了地图的缩放与平移功能，VectorMap组件仍会捕获滚轮事件并阻止默认的页面滚动行为，导致在地图区域滚动滚轮时页面无法正常滚动。

解决方案 #

给VectorMap绑定onWheel事件，在事件处理函数中阻止组件对滚轮事件的内部处理，让事件冒泡到页面层级以触发默认滚动行为：

<VectorMap
  id="vector-map"
  title="Generic Map"
  zoomingEnabled={false}
  panningEnabled={false}
  onClick={(e) => console.log(e)}
  onWheel={(e) => {
    // 阻止组件内部处理滚轮事件，允许页面执行默认滚动行为
    e.nativeEvent.stopImmediatePropagation();
  }}
>
  <Layer
    dataSource={pangaeaContinents}
    name="areas"
    color="#bb7862"
  />
</VectorMap>

备选方案（若上述方法不生效）

通过React Ref获取地图容器元素，手动添加被动滚轮事件监听器，确保浏览器优先处理页面滚动：

import { useRef, useEffect } from 'react';

// 组件内部逻辑
const mapRef = useRef(null);

useEffect(() => {
  const mapDomElement = mapRef.current?.instance?.element();
  if (!mapDomElement) return;

  const handleWheel = (event) => {
    event.stopPropagation();
  };

  mapDomElement.addEventListener('wheel', handleWheel, { passive: true });
  
  return () => {
    mapDomElement.removeEventListener('wheel', handleWheel);
  };
}, []);

// 给VectorMap绑定ref
<VectorMap
  ref={mapRef}
  id="vector-map"
  title="Generic Map"
  zoomingEnabled={false}
  panningEnabled={false}
  onClick={(e) => console.log(e)}
>
  <Layer
    dataSource={pangaeaContinents}
    name="areas"
    color="#bb7862"
  />
</VectorMap>

以上两种方案都能让VectorMap区域的滚轮操作触发页面滚动，同时保留地图的点击交互功能。

内容的提问来源于stack exchange，提问作者Koala7