Javascript：从对象中删除所有鼠标悬停事件答案

【问题标题】：Javascript: remove all mouseover events from an objectJavascript：从对象中删除所有鼠标悬停事件
【发布时间】：2013-02-08 22:20:30
【问题描述】：

此问题询问有关 Google 图表的问题，但更笼统。

鼠标悬停在图表中的图例会出现此错误：

未捕获的类型错误：无法读取 null 的属性“x”

我没有添加任何 'onmouseover' 事件等，看来只是对系列中 null 的出现不满意（当您绘制具有不同 x 值的两个系列时，Google 图表表示要添加空点为null 并使用interpolateNull : true 绘制）。

还有其他人遇到过这个问题吗？有没有办法禁用图表图例的任何鼠标悬停事件？

非常感谢您提供的任何建议。

更新： There is a minimal jsfiddle demonstrating this error here。 Google 图表似乎不喜欢有两个具有完全相同值的 x 和 y 点。

【问题讨论】：

如果您可以提供 (representative/minimal) live demo，我们可能会为您提供帮助。顺便说一下，也将代表代码发布在此处，使问题尽可能独立，以便为未来的访问者保留其使用。
@DavidThomas 我不知道如何允许使用 JSFiddle 上传我的 XML 数据文件，所以我只是在这里弹出它：colorfulengineering.org/test.html 请注意，这个版本有鼠标悬停事件，但即使没有它们，任何时候鼠标悬停在图例上，它崩溃了。
Chrome v21 Ubuntu 没有错误或崩溃。
@dennmat 您是否将鼠标悬停在第一个人物的图例上？如果你这样做并检查控制台，我会收到描述的错误（我刚刚在 Chrome 24.0.1312.69 Ubuntu 上尝试过）。
@Oliver 啊，我明白了，我确实收到了错误，抱歉，我以为它在图表上而不是在图例上。

标签： javascript google-visualization

【解决方案1】：

您可以尝试阻止适当的鼠标事件到达内置处理程序。

这需要在图表的图例中添加一个mouseover 侦听器。侦听器将调用event.stopPropagation()（令人惊讶的是不需要在事件传播的capture 阶段触发）。

原来mousemove 事件也在被监听，所以也停止它们。

以下内容在 Firefox 上对我有用：

$('svg > g:first-of-type').bind('mouseover mousemove', function(e) { e.stopPropagation(); });

【讨论】：

优秀。我更新为使用$('#' + chart_div_id + ' > div > div > svg > g:first-of-type')，因为我的真实（非jsfiddle）示例有多个图表）。
这不适用于不支持 svg 但支持 vml 的浏览器，因此如果这对您很重要，您应该尽可能更新以包含该标记。
注意：事件列表应扩展为mouseover mousemove mousedown mouseup click dblclick，以防止因鼠标点击而崩溃。

【解决方案2】：

我的答案基于我在这里找到的解决方案：http://jsfiddle.net/asgallant/6Y8jF/2/

要点是隐藏 Google 的传奇并建立自己的传奇。首先，通过将legend: {position: 'none'} 作为选项之一传递给chart.draw 来禁用内置图例。

在为图表创建持有者 div 的 addDiv 函数中，添加第二个元素来保存图例。

function addDiv(parent_id, div_id) {
    $("#" + parent_id).append('<div id="' + div_id + '" class="chart-chart"></div><ul id="legend_' + div_id + '" class="chart-legend"></ul>');
}

然后，在您的 drawChart 函数中，构建图例：

function drawChart(chart, original_table, 
    x_attr, y_attr, x_axis_lbl, y_axis_lbl, x_min_max,
    div_id) { //pass div_id to this function to be able to get legend element

    var google_table = allSeriesToGoogleTable(original_table, 
        x_attr, y_attr, ranking_titles);

    var colors = ["#3366cc","#dc3912","#ff9900"]; //use whatever colors you like
    var options = {'chartArea':{width:"60%"}, 
        vAxis: {'title': y_axis_lbl}, 'hAxis': {'title': x_axis_lbl},
        'interpolateNulls':true,
        colors: colors, //use the same colors for the chart and the legend
        legend: {position: 'none'} //hide default legend
    };
    var legend = $('#legend_' + div_id);
    for (var i = 1; i < ranking_titles.length; i++) {
        var li = $('<li></li>'),
            marker = $('<div class="legendMarker"></div>'),
            explanation = $('<span></span>');
        explanation.text(ranking_titles[i]); // legend marker text
        marker.css( {backgroundColor: colors[i-1]} ); //marker color
        li.append(marker).append(explanation);
        legend.append(li); 
    }
    if ( ! x_min_max === undefined )
    //do something
    chart.draw( google_table, options );

    // add the data table to the chart
    chart.google_table = google_table;
}

当然，请确保您也包含小提琴中的 CSS：

.chart-chart {
    float: left;
}
.chart-legend {
    margin: 30px 0 0 0;
    float: left;
    list-style: none;
}
div.legendMarker {
    height: 1em;
    width: 1em;
    display: inline-block;
    margin: 0 5px 0 0;
}

由于您无法将代码放入小提琴中，因此未经测试，但它应该可以让您完成 99% 的工作。

【讨论】：

+1 很棒的 jsfiddle，可能是最好的答案；但是，如果可以保留原始的 Google 渲染图例，那会更好，因为您的示例在图纸中显示了一些重叠...我已经编辑（编辑中的 jsfiddle 链接）以显示最小错误（没有您的解决方案)。
那么，你可以在绘制图表之前对数据进行预处理以去除这些重复项吗？

【解决方案3】：

此文档可能会很有帮助： https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=en#Configuration_Options

但我认为您的代码包含错误。从基本配置开始尝试调试。

【讨论】：

在页面上只放置一张图表会发生什么？
请查看更新后的 jsfiddle...显然，当存在重复点时，Google 图表会崩溃...

【解决方案4】：

如果一个元素有多个鼠标悬停事件，它们必须是使用addEventListener添加的。

如果你想删除使用addEventListener 添加的事件，你需要removeEventListener。但是这个方法需要引用监听函数（见https://developer.mozilla.org/en-US/docs/DOM/element.removeEventListener）。

那么，也许你可以试试Remove all JavaScript event listeners of an element and its children?

【讨论】：