echarts地图缩放与页面滚动问题

Question

我在页面中放了一个echarts地图，并开启了缩放功能，但是如果鼠标放在地图上滑动滚轮，整个页面也会同步上下滚动，请问该怎么让用户只在地图范围内缩放地图不滑动整个页面呢？

Answer 1

可以通过阻止事件冒泡来解决这个问题。具体来说，当鼠标在地图上滑动滚轮时，会触发 mousewheel 或 DOMMouseScroll 事件，在事件处理函数中，可以先阻止事件的默认行为，然后阻止事件向上级元素冒泡，代码如下：

chart.on('mousewheel', function (params) {
  // 阻止事件的默认行为
  params.event.preventDefault();
  // 阻止事件向上级元素冒泡
  params.event.stopPropagation();
  // 处理缩放逻辑
  // ...
});