React Leaflet中如何监听并识别地图的右键点击事件？

解决方案 #

React Leaflet可以直接感知地图右键点击行为。你当前使用的onClick事件是Leaflet封装的专用左键点击事件，默认仅响应左键操作，所以事件对象不会返回按键类型标识。可以按以下两种方案实现右键监听：

• 方案1：使用组件内置的onContextmenu右键专用事件
  这是最简便的实现方式，React Leaflet的Map组件原生支持onContextmenu属性绑定右键点击处理函数，示例代码如下：

<Map
    ref="map"
    preferCanvas={true}
    viewport={this.props.viewport}
    onClick={(e) => this.onClickHandler(e)} // 原有左键点击逻辑保留
    onContextmenu={(e) => this.onRightClickHandler(e)} // 新增右键事件绑定
>

对应的右键处理函数示例：

onRightClickHandler = (e) => {
  // 阻止浏览器默认右键菜单弹出，按需添加
  e.originalEvent.preventDefault();
  // 可直接获取右键点击的坐标信息
  const { lat, lng } = e.latlng;
  console.log('右键点击坐标：', lat, lng);
}

• 方案2：监听原生鼠标事件区分所有按键类型
  如果需要在同一个事件回调中同时区分左键、中键、右键点击，可以通过地图实例绑定原生mousedown事件，通过button属性判断按键类型：

// 组件挂载后绑定事件
componentDidMount() {
  // 获取原生Leaflet地图实例
  const mapInstance = this.refs.map.leafletElement;
  mapInstance.on('mousedown', (e) => {
    const buttonType = e.originalEvent.button;
    // 0=左键 1=中键 2=右键
    if (buttonType === 2) {
      e.originalEvent.preventDefault();
      // 右键点击业务逻辑
    } else if (buttonType === 0) {
      // 左键点击业务逻辑
    }
  })
}

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