如何在LeafletJS地图中禁用鼠标左右键平移并保留中键平移功能

错误原因 #

你原有代码监听的mousemove事件无法获取当前按下的鼠标按键值：只有mousedown、mouseup这类由按键动作触发的事件才会携带正确的e.button属性，单纯移动鼠标时e.button固定返回-1，所以你的判断逻辑始终命中非中键分支，完全无法生效。

修正方案 #

替换你原有「禁用左右键平移」部分的代码即可，核心逻辑为默认禁用拖拽，仅在检测到中键按下时临时启用拖拽，按键松开后立刻重置状态避免异常，修改后的代码如下：

// 默认先关闭地图拖拽功能
map.dragging.disable();

// 监听鼠标按下事件，仅中键按下时启用拖拽
document.addEventListener('mousedown', (e) => {
  if (e.button === 1) {
    map.dragging.enable();
  } else {
    map.dragging.disable();
  }
});

// 监听鼠标松开事件，统一关闭拖拽，避免状态错位
document.addEventListener('mouseup', () => {
  map.dragging.disable();
});

// 原有禁用右键菜单的逻辑保留即可
document.addEventListener('contextmenu', event => event.preventDefault());

可选优化 #

如果你的页面除了地图外还有其他区域需要用到中键操作，可以把事件绑定到地图容器而非全局document上，避免影响其他区域的交互，只需把上述代码中的document替换为map.getContainer()即可。

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