echarts 在touch类设备 冒泡/穿透的问题

83 阅读1分钟

背景

echarts版本:5

有一个弹窗Modal,Modal弹窗中有关闭按钮

点击echarts的图表触发弹出弹窗,如果点击的区域为关闭按钮的区域,那么表现就是点击后,弹窗弹出又马上关闭

原因分析

在手机中或者浏览器的移动设备模式中,echarts的PointerEvent变成了TouchEvent,会引起冒泡/穿透

PC设备、非触摸类型设备 image.png image.png 移动端、触摸类型设备 image.png image.png

处理方案

处理方案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()