Javascript: удалить все события mouseover с объекта

Question

Этот вопрос задает вопрос о графиках Google, , но является более общим.

Mouseover легенды в моем графике дает эту ошибку:

Uncaught TypeError: Cannot read property 'x' of null

Я не добавил «OnMouseOver» события и т.д., кажется, что это просто недоволен появлением null в (когда вы рисуете две серии с разными значениями x, в графиках Google добавляются пустые точки как null и участок с interpolateNull : true).

У кого-нибудь еще была эта проблема? Есть ли способ отключить любые события mouseover для легенды диаграммы?

Большое спасибо за любые советы, которые вы можете дать.

Обновление:There is a minimal jsfiddle demonstrating this error here. Кажется, диаграммы Google не любят иметь две точки x и y, которые имеют одинаковые значения.

Answer 1

Вы могли бы попытаться остановить соответствующие события мыши достичь встроенных обработчиков.

Для этого требуется добавить слушателя mouseover к легенде диаграммы. Слушатель вызовет event.stopPropagation() (и неожиданно не нужно запускать во время фазы распространения события capture).

Оказалось, что прослушиваются также события mousemove, поэтому остановите их.

Следующие работал для меня на Firefox:

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

Answer 2

Эта документация может быть очень полезной: https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=en#Configuration_Options

Я думаю, однако, что ваш код содержит ошибки. Попробуйте отладить, начав с базовой конфигурации.

Answer 3

Я основывая этот ответ на решение, которое я нашел здесь: http://jsfiddle.net/asgallant/6Y8jF/2/

Суть, чтобы скрыть легенду Google и создать свой собственный. Во-первых, отключите встроенную легенду, передав legend: {position: 'none'} в качестве одного из вариантов: chart.draw.

В вашей функции addDiv, которая создает div для вашего диаграммы, добавьте второй элемент для хранения вашей легенды.

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; 
} 

Поскольку вы не могли 't получить ваш код в скрипке, это непроверено, но оно должно получить вас 99% пути там.

Answer 4

Если элемент имеет более одного события mouseover, они должны быть добавлены с использованием addEventListener.

И если вы хотите удалить события, добавленные с помощью addEventListener, вам нужно removeEventListener. Но этот метод требует ссылки на функцию слушателя (см. https://developer.mozilla.org/en-US/docs/DOM/element.removeEventListener).

Тогда, может быть, вы могли бы попробовать Remove all JavaScript event listeners of an element and its children?