Javascript Girl
  1. Javascript Girl
  3. Javascript: supprime tous les événements de la souris d'un objet
Intereting Posts
Date incorrectement interprétée dans ma chaîne Qu'est-ce que signifie la boucle d'événement dans node.js? La boucle d'événement javascript ou la boucle d'événement libuv? Comment puis-je changer dynamiquement la position et la taille des flèches de direction sur une disposition de force d3.js dirigée? Meteor: page de profil utilisateur avec Iron Router Détection d'une "date invalide" Date instance en JavaScript Comment exécuter un code jQuery ou JavaScript après la redirection Comment puis-je charger une page HTML dans un <div> en utilisant JavaScript? Javascript history.back perde le résultat de la recherche Chaîne divisée avec une occurrence unique (pas deux fois) d'un délimiteur en Javascript Ajax Load with fade in Le vote rapide contre le sondage à long terme pour les applications Web en temps réel? Ajout d'espace entre les nombres? JavaScript / jQuery pour télécharger le fichier via POST avec les données JSON Est-il possible d'annuler la fonction "appel"? Comment puis-je trouver ce que Javascript exécute sur certains événements?

Javascript: supprime tous les événements de la souris d'un objet

Cette question pose des questions sur Google Maps, mais elle est plus générale.

Le curseur de la légende dans mon tableau donne cette erreur:

Uncaught TypeError: Impossible de lire la propriété 'x' de null

Je n'ai pas ajouté d'événements "onmouseover", etc., il semble que ce soit simplement mécontent de l'apparence de null dans la série (lorsque vous traitez deux séries avec des valeurs x différentes, les graphiques Google indiquent d'ajouter des points vides comme null et Intrigue avec interpolateNull : true ).

Quelqu'un d'autre a-t-il eu ce problème? Existe-t-il un moyen de désactiver les événements de la souris sur la légende du graphique?

Merci beaucoup pour tout conseil que vous pouvez donner.

Mise à jour: Il existe un jsfiddle minimal qui démontre cette erreur ici . Il semble que Google charts n'aime pas avoir deux points x et y qui ont les mêmes valeurs exactes.

Vous pouvez essayer d'arrêter les événements de souris appropriés pour atteindre les gestionnaires intégrés.

Cela nécessite d'ajouter un auditeur de la mouseover sur la légende du graphique. L'auditeur appellera event.stopPropagation() et il n'est pas nécessaire de déclencher lors de la phase de capture de la propagation de l'événement.

Il s'avère que les événements mousemove sont également écoutés, alors arrête-les aussi.

Ce qui suit a fonctionné pour moi sur Firefox: 

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

Je fonde cette réponse sur une solution que j'ai trouvée ici: http://jsfiddle.net/asgallant/6Y8jF/2/

Le but est de cacher la légende de Google et de construire la vôtre. Tout d'abord, désactivez la légende intégrée en passant la legend: {position: 'none'} dans l'une des options de chart.draw .

Dans votre fonction addDiv qui crée la addDiv support pour votre graphique, ajoutez un deuxième élément pour contenir votre légende. 

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

Ensuite, dans votre fonction drawChart , construisez la légende: 

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

Bien sûr, assurez-vous d'inclure le CSS du violon aussi: 

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

Comme vous ne pouviez pas obtenir votre code en violon, cela n'est pas testé, mais cela devrait vous permettre de disposer de 99% du chemin.

Cette documentation peut être très utile: https://developers.google.com/chart/interactive/docs/gallery/linechart?hl=fr#Configuration_Options

Je pense cependant que votre code contient des erreurs. Essayez le débogage en commençant par une configuration de base.

Si un élément a plus d'un événement mouseover, ils doivent avoir été ajoutés en utilisant addEventListener .

Et si vous souhaitez supprimer des événements ajoutés en utilisant addEventListener , vous devez removeEventListener . Mais cette méthode nécessite une référence à la fonction d'écoute (voir https://developer.mozilla.org/en-US/docs/DOM/element.removeEventListener ).

Alors, peut-être que vous pourriez essayer Supprimer tous les auditeurs d'événements JavaScript d'un élément et de ses enfants?