Mapbox GL JS调用map.off移除mousemove事件监听不生效如何解决

事件解绑失效的核心原因是：你传入map.on和map.off的回调函数不是同一个引用。
你写的(event) => handlerValues(event)属于内联匿名箭头函数，每次代码执行都会生成一个全新的函数实例。哪怕你已经用useCallback缓存了内部的handlerValues，外层这层匿名函数每次都是新创建的，地图的事件系统匹配不到之前绑定的回调引用，自然无法完成移除。
另外这层匿名包裹函数本身是完全冗余的：事件触发时，event对象本来就会作为第一个参数默认传入绑定的回调函数，不需要你手动透传。

直接把你用useCallback缓存好的handlerValues作为回调传给绑定、解绑方法即可，不需要额外套箭头函数：

// 绑定事件
map.on('mousemove', handlerValues)

// 解绑事件
map.off('mousemove', handlerValues)

这种写法下，缓存后的handlerValues引用全程稳定，on和off拿到的是完全相同的函数，解绑会正常生效，函数内也可以正常接收到event事件对象。

如果你确实需要给handlerValues传入额外的自定义参数，不能直接写内联箭头函数，需要把包装后的回调也做引用缓存，比如用useRef存储：

const handlerRef = useRef()
// 把包装后的回调存在ref上，保证引用一致
handlerRef.current = (event) => handlerValues(event, yourCustomParams)

// 绑定
map.on('mousemove', handlerRef.current)
// 解绑
map.off('mousemove', handlerRef.current)

内容的提问来源于stack exchange，提问作者Рома Федоров