Propagation de l'événement Google Map Double Click

Cette question est posée souvent, mais jamais vraiment répondu correctement. Voyons si nous pouvons le remédier!

Propagation des événements

Google vous permet de lier des événements dans une vue Google Map via leur API à l' aide de gestionnaires d'événements .

Parfois, vous pouvez lier votre gestionnaire d'événements à un événement auquel Google luimême est déjà obligé. Ainsi, lorsque votre événement se déclenche et fait tout ce que vous lui avez dit, vous pourriez trouver Google aussi faire sa propre petite chose en même temps.

Hmm, puis-je gérer l'événement afin que mon code fonctionne, mais arrêtez-vous de continuer et de déclencher le gestionnaire d'événements de Google?

Vous pouvez bien ! Bienvenue dans Event Propagation (aka Event Bubbling).

Jetez un oeil à ce code

Ici, je lier un gestionnaire d'événements pour double-cliquer sur Google Map:

 var aListener = google.maps.event.addListener(map, 'dblclick', function(event) { // Try to prevent event propagation to the map event.stop(); event.cancelBubble = true; if (event.stopPropagation) { event.stopPropagation(); } if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }); 

La map est un objet Google Map à laquelle vous souhaitez lier.

Cela ne fonctionne pas. Les bulles d'événement, et la carte s'inspire. Je ne sais pas pourquoi.

Vous demandez, avez-vous lu la documentation?

Effectivement. La documentation dit d'utiliser event.stop();

J'ai examiné ce que les autres disent. Ce problème est précisément mon problème. Il a été marqué comme fixe, mais la solution ne fonctionne pas.

Des idées?

Solution de contournement

Une solution de contournement possible pour l'événement double-clic est de désactiver le comportement par défaut de Google lorsque vous en avez besoin pour ne pas déclencher, puis réactivez-le plus tard.

Vous faites cela avec l'argument disableDoubleClickZoom . Consultez la documentation ici .

Voici un code à désactiver:

 map.set("disableDoubleClickZoom", true); 

Maintenant pour ré-Activer:

 map.set("disableDoubleClickZoom", false); 

Bien sûr, vous pouvez définir la propriété dans l'argument MapOptions lorsque l'objet map est créé en premier lieu.

2 Solutions collect form web for “Propagation de l'événement Google Map Double Click”

MISE À JOUR: Malheureusement, je devais savoir que Firefox ne rend pas l'événement actuel accessible via window.event donc, ce code ne fonctionnera pas là-bas. Je n'ai pas encore trouvé de solution de contournement pour cela.


Il s'avère que la correction de votre code est minimale: supprimez simplement le paramètre d' event de votre gestionnaire d'événements, ce qui permet d'accéder à l'objet window.event global dans le gestionnaire.

Le code exemple suivant m'a fonctionné dans IE et Chrome, mais pas Firefox :

 google.maps.event.addListener(map, "dblclick", function(googleMapsEvent) { console.debug("caught double click"); // reference the global event object // ignore the googleMapsEvent passed in by Google Maps! event.preventDefault(); }); 

Cette réponse m'a mis sur la bonne voie!

Pas une solution mais quelques idées, comme demandé …

event.stopPropagation() n'est pas une panacée généralisée pour les problèmes de ce type pour deux raisons:

  • Votre gestionnaire d'événements peut répondre à un événement déjà bouffonné, c'est-à-dire trop tard pour éviter la gestion des événements (zoom dans ce cas) qui a été déclenché plus tôt dans le cycle de bouillonnement.
  • Il se peut qu'il contienne quelques imprécisions par rapport à l'original. .addListener() implémente un modèle d'observateur, ce qui signifie que de nouveaux ajouts sont ajoutés à la file d'attente des "observateurs concrets" de l'élément sans supprimer les gestionnaires précédemment ajoutés par le même mécanisme.

Une solution de contournement est presque sans doute disponible pour ces deux situations, mais nécessiterait probablement une «connaissance interne» de Google Maps à résoudre.

Peut-être quelqu'un d'autre sait-il plus que moi.

JavaScript rend le site Web intelligent, beauté et facile à utiliser.