자바 스크립트 : 개체에서 모든 mouseover 이벤트를 제거하십시오.

Question

이 질문은 Google 차트, 에 대한 질문입니다. 이에 null의 모양으로 단지 불만이 있다는 표시,

Uncaught TypeError: Cannot read property 'x' of null

나는 등 어떤 'onMouseover와'이벤트를 추가하지 않은 : 내 차트의 전설의

마우스 오버이 오류를 제공합니다 시리즈 (다른 x 값을 가진 두 개의 시리즈를 그릴 때, 구글 차트는 빈 포인트를 null으로, 플롯을 interpolateNull : true으로 추가한다고 말합니다).

이 문제가 발생한 사람이 있습니까? 차트 범례의 마우스 오버 이벤트를 비활성화하는 방법이 있습니까?

당신이 줄 수있는 조언을 많이 주셔서 감사합니다.

업데이트 :There is a minimal jsfiddle demonstrating this error here. 구글 차트는 똑같은 값을 가진 x와 y 포인트가 두 개있는 것을 좋아하지 않는 것 같습니다.

Answer 1

당신은 내장 된 핸들러에 도달 적절한 마우스 이벤트를 중지 시도 할 수 시도 할 수 있습니다.

차트의 범례에 수신기를 추가해야합니다 (mouseover). 청취자는 event.stopPropagation()을 호출합니다 (그리고 놀랍게도 이벤트 전파의 capture 단계 중에 트리거 될 필요는 없습니다).

mousemove 이벤트도 수신 중이므로 중지해야합니다.

파이어 폭스에 나를 위해 일한 다음 :

$('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/

요점은 구글의 전설을 숨기고 자신을 구축하는 것입니다. 먼저, chart.draw의 옵션 중 하나로 legend: {position: 'none'}을 전달하여 기본 제공 범례를 사용 중지합니다.

차트의 홀더 div를 만드는 addDiv 함수에서 범례를 보유 할 두 번째 요소를 추가하십시오.

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

이 나오지 않았어 때문에 : 당신은뿐만 아니라 바이올린에서 CSS를 포함해야합니다, 물론

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

:

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 기능에, 전설 구축 코드를 바이올린에 넣지 않아도이 코드는 테스트되지 않았지만 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?