背景
echarts版本:5
有一个弹窗Modal,Modal弹窗中有关闭按钮
点击echarts的图表触发弹出弹窗,如果点击的区域为关闭按钮的区域,那么表现就是点击后,弹窗弹出又马上关闭
原因分析
在手机中或者浏览器的移动设备模式中,echarts的PointerEvent变成了TouchEvent,会引起冒泡/穿透
PC设备、非触摸类型设备
移动端、触摸类型设备
处理方案
处理方案1 原生事件处理
const chartClick = (params: any) => {
params?.event?.event?.preventDefault()
// ...
}
chartIns.current = echarts.init(chart.current)
chartIns.current.on('click', chartClick)
这个方法 只能解决手机浏览器中的问题,不一定生效,比如在客户端的webview中就没生效
处理方案2 加防误触锁
const isCanTouch = useRef<boolean>(true)
const timer = useRef<NodeJS.Timer | null>(null)
const onCloseSymbolModal = () => {
if (!isCanTouch.current) {
return
}
// closeModal()
}
const chartClick = (params: any) => {
if (isCanTouch.current) {
isCanTouch.current = false
timer.current = setTimeout(() => {
isCanTouch.current = true
}, 100)// 根据你的弹窗过渡效果动态设置
}
// ...
// openModal()
}
chartIns.current = echarts.init(chart.current)
chartIns.current.on('click', chartClick)
虽然还是会穿透,但是这种方法能阻塞closeModal的执行,满足快速点击都不会误触到closeModal()