[apache/echarts][Bug] tooltip自定义点击事件，会触发点击穿透

Version

5.3.2

1、生成折线图 2、设置tooltip显示 3、自定义tooltip里面的dom样式 4、在tooltip中添加了自定义事件onclick 5、点击tooltip中的自定义事件，触发其他操作

当tooltip显示，且下面有遮挡的item圆点时，点击tooltip中的自定义事件，导致点击穿透，触发到下面的item事件，且设置tooltip的hideDelay属性，延迟tooltip隐藏，也不能阻止点击穿透

tooltip里的自定义点击事件，如何才能阻止点击事件穿透，不要点击到下面遮挡的折线图上的item圆点

Environment OS：iPhoneX Browser: Chrome 101.0.4951.67 Framework ：Vue2 Demo

https://codepen.io/nancy2013/pen/mdXpWmO?editors=0111

Nancy2013

Hi, @Nancy2013 .

前几天我也遇到过这样的需求，echarts实例的on方法还可以有第二个参数叫query，可以做一些过滤，你可以试试看~

chart.on('click', 'series', function () {...}); chart.on('click', 'series.line', function () {...}); chart.on('click', 'xAxis.category', function () {...});

https://echarts.apache.org/zh/api.html#echartsInstance.on

tyn1998

在tooltip中添加了自定义事件onclick

可不可以补充一个demo例子，我可以帮忙试试看~

tyn1998

在tooltip中添加了自定义事件onclick

可不可以补充一个demo例子，我可以帮忙试试看~

demo: https://codepen.io/nancy2013/pen/mdXpWmO?editors=0111

定位发现，在移动端才会出现这个问题，目前是添加了tooltip的{ enterable:true }，可以解决点击穿透问题。但是点击之后，tooltip不会自动隐藏

Nancy2013

嗯，我感觉需要在tooltip里做点击的情况应该是要把enterable打开的。

电脑上因为鼠标有hover事件，所以鼠标经过tooltip就出现，移走就消失；但是移动端没有hover这个操作，只能靠点击来控制显示/隐藏，所以是不支持自动隐藏的。

（所以这不是BUG哈哈哈）

tyn1998

需求是tooltip里的点击事件，可以修改拐点item的Y轴值，tooltip不隐藏，拐点的Y轴值修改后，tooltip不会同步更新位置

现在就是在点击事件里，手动触发了tooltip的隐藏，和折线拐点的取消高亮事件，解决这个问题 dispatchAction({ type: 'hideTip' })

dispatchAction({ type: 'downplay', })

Nancy2013

[apache/echarts][Bug] tooltip自定义点击事件，会触发点击穿透

回答