uniapp中echarts点击失效问题解决
·
在uni-app(尤其是小程序-web混合渲染场景,如webview或app-plus)中,使用ECharts时经常会遇到点击事件失效的问题。
1.解决方法
在echarts组件页面script中加上
window.wx = undefined;
2.原理
1. 微信 JS-SDK 拦截了 touch 事件
在微信 webview中,微信会自动注入 window.wx 对象,并劫持了部分原生事件(如 touchstart、touchend、click),用于实现:
-
分享
-
拍照
-
扫码
-
支付等功能
但ECharts 的点击事件是基于原生 DOM 事件(如 mousedown、touchstart)实现的,依赖于事件冒泡和默认行为。
2. 微信 SDK 阻止了事件冒泡或默认行为
当 window.wx 存在时,微信 SDK 会在某些情况下阻止事件冒泡或修改事件路径,导致:
-
ECharts 的
zr(ZRender)层接收不到点击事件 -
图表的
click、mouseover等事件完全失效
为什么 window.wx = undefined; 有效?
window.wx = undefined;
这行代码手动移除了微信 SDK 的入口对象,相当于:
“告诉微信:你别再管我页面的事件了。”
一旦 wx 被移除,微信 SDK 就无法再拦截或修改事件流,ECharts 的事件系统恢复正常。
微信 SDK 通过 window.wx 劫持了事件流,导致 ECharts 点不动。你把它干掉,事件就恢复正常了。
更多推荐



所有评论(0)