Javascript: remove all mouseover events from an object

Question

This question asks about Google charts, but is more general.

Mouseover of the legend in my chart gives this error:

Uncaught TypeError: Cannot read property 'x' of null

I haven't added any 'onmouseover' events, etc., it appears that it's just unhappy with the appearance of null in the series (when you plot two series with different x-values, Google charts says to add empty points as null and plot with interpolateNull : true).

Has anyone else had this problem? Is there a way to disable any mouseover events for the chart legend?

Thanks a lot for any advice you can give.

Update: There is a minimal jsfiddle demonstrating this error here. It seems Google charts doesn't like having two x and y points that have the exact same values.

Answer 1

You could try stopping appropriate mouse events from reaching the built-in handlers.

This requires adding a mouseover listener to the chart's legend. The listener will call event.stopPropagation() (and surprisingly doesn't need to be triggered during the capture phase of event propagation).

It turns out that mousemove events are also being listened to, so stop them too.

The following worked for me on Firefox:

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