echarts的重复绑定事件

在用echarts结合react制作图表,在柱状图是需要点击一栏之后调用后台数据,渲染一个数据表格,开始直接使用histogram.on绑定事件,但出现点击一次之后连续触发多次回调,调查原因之后发现是事件绑定多次的坑;

histogram.setOption(option);
        histogram.on("mouseover", function (params) {
             vm.getTableB(vm.props.ci0301Info.step_sn_b[params.dataIndex]);
        });
引用该博客的解释:

"在页面中为一个元素绑定事件,事件执行后页面未刷新且元素还在,然后你再次点击,元素又被绑定个一次点击事件,这样第二次点击就会执行两次,以此类推。如何解决累加绑定:第一种方法是元素点击后删除,然后再动态创建一个元素,再添加点击事件。显然这个方式很麻烦。第二中方法是使用jquery的one()方法,为元素绑定一个一次性的事件处理函数,这个事件处理函数只会被执行一次" 

reference:https://www.cnblogs.com/daijinxue/p/6124979.html

针对echart的解决办法:

在绑定事件之前,清空事件.

histogram.setOption(option);
        histogram.off("mouseover");//防止累计触发
        histogram.on("mouseover", function (params) {
             vm.getTableB(vm.props.ci0301Info.step_sn_b[params.dataIndex]);
        });

阅读更多

没有更多推荐了,返回首页