Google 可视化 DataTable 不会触发 onMouseOver 事件

Question

onmouseover 事件不会为 Google 可视化 DataTable 触发。

var table = new google.visualization.Table(document.getElementById('results'));
var view = new google.visualization.DataView(d);
var cssClassNames = {'hoverTableRow': 'hover-table-row'};

view.setColumns([1,2,3,4,5]);
table.draw(view, {width:1200,'cssClassNames':cssClassNames});

google.visualization.events.addListener(table, 'ready', 
    function() {
      $('#results').mouseover(
          function (e) {
            alert('inside');
          });
    });

我确实已将 table 的视图设置为隐藏到一列。任何人都可以建议代码有什么问题吗？

这是代码http://jsfiddle.net/7ezfjpc9/

Answer 1

您有两个问题：

查看 docs :

The chart is ready for external method calls. If you want to interact with the chart, and call methods after you draw it, you should set up a listener for this event before you call the draw method, and call them only after the event was fired.

所以你需要在google.visualization.events.addListener(table, 'ready', function() { 之前声明 draw() - 然后它就会起作用。
请参阅分叉 fiddle -> http://jsfiddle.net/apwaj5oo/

您缺少 jQuery - 猜想这是您创建 fiddle 时的一个错误 :)

但是，在附加鼠标悬停处理程序之前，您真的不需要监听 ready。您可以简单地使用 delegated event :

$('#table_div').on('mouseover', 'table', function (e) {
    alert('inside');
});

这会将事件处理程序附加到 <table> google 可视化注入，即使您在可视化实际注入 <table> 之前声明了处理程序 - 您的 [的另一个分叉版本=45=] -> http://jsfiddle.net/1rz9zqo5/

Google 可视化 DataTable 不会触发 onMouseOver 事件

onMouseOver event doesn't get fired for a Google visualization DataTable

php

jquery

google-visualization