1.需求:vue 移动端的echarts点击图表外部隐藏tooltip
methods:{
//监听鼠标点击的位置,清除tooltip
handleChartClick(e) {
// 判断点击的位置是否在图表上
const { left, top, width, height } = document
.getElementById(this.id)
.getBoundingClientRect();
const x = e.clientX;
const y = e.clientY;
if (x < left || x > left + width || y < top || y > top + height) {
// 隐藏tooltip
this.myChart.dispatchAction({ type: "hideTip" });
}
},
},
2. 在mouted里面监听点击事件,在beforeDestory移除事件
mounted() {
// 监听点击事件隐藏tooltip
document.addEventListener("click", this.handleChartClick, true);
},
beforeDestroy() {
// 解绑点击事件
document.removeEventListener("click", this.handleChartClick, true);
},
好家伙报错了,并且是跳到下一页点击页面之后,才会报错:
Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null at VueComponent.handleChartClick;
搜了一圈都没找到解决方法,然后看到关键字段:VueComponent,打开谷歌调试工具,发现组件没有销毁,处在inactive(未激活)状态,才想起写了keepAlive缓存页面。。。TT
3. 所以需要在deactivated未激活状态移除点击事件:
deactivated(){
//因为组件缓存,所以也要解绑点击事件
document.removeEventListener("click", this.handleChartClick, true);
}