javascript - 在 Chart.js 圆环图上检测 onHover 是否完整

Question

我有一个 Chart.js 圆环图 (v2.7.1)，我希望在用户将鼠标悬停在相关图表元素上时设置外部元素的类

我可以在图表的 options.hover 中使用 onHover 事件

 hover: {
                    onHover: function (evt, item) {
                        if (item.length) {
                            var index = item[0]._index;
                            var legendElement = $(#get element based on index#);
                            legendElement.addClass('active');
                        }
                    }
                }

这在元素 (legendElement) 上完美地设置了类，但是当用户不再将鼠标悬停在元素上时，我需要能够从元素中删除我设置的类

我使用的方法是否正确？有没有办法检测到悬停已完成或片段不再处于焦点？

Answer 1

您是否定义了“onHover”属性之外的“events”属性？如果将“mouseout”添加到列表中，则在这两种情况下都会调用“onHover”函数。查看此 https://www.chartjs.org/docs/latest/general/interactions/events.html 的文档

可能有效的示例代码:

options: {
   events: ["mousemove", "mouseout"],
   onHover: function (evt, item) {

       if (item.length) {
           var index = item[0]._index;
           var legendElement = $(#get element based on index#);
           if(evt.type == "mousemove"){
             legendElement.addClass('active');
           }else{
             legendElement.removeClass('active');
           }

       }
   }
}