google event addlistener javascript google-maps-api-3 event-handling mouseevent event-propagation

javascript - addlistener - Propagación de eventos de doble clic de Google Map



google.maps.event.addlistener(marker ''click'' function() (2)

Esta pregunta se hace a menudo, pero nunca se responde bien. ¡A ver si podemos remediarlo!

Propagación de eventos

Google le permite enlazar eventos en una vista de mapa de Google a través de su API utilizando los controladores de eventos .

En ocasiones, puede vincular su controlador de eventos a un evento al que Google ya esté vinculado. Por lo tanto, cuando su evento se dispare y haga lo que usted le dijo que haga, es posible que Google también haga lo suyo al mismo tiempo.

Hmm, ¿puedo manejar el evento de modo que mi código se ejecute, pero detener el evento para que continúe y dispare el controlador de eventos de Google?

¡Seguro que puedes ! Bienvenido a Event Propagation (también conocido como Event Bubbling).

Echa un vistazo a este código

Aquí ato un controlador de eventos para hacer doble clic en el mapa de Google:

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

Aquí el map es un objeto de Google Map para enlazar.

Esto no funciona. Las burbujas del evento y el mapa se acercan. No sé por qué.

Usted pregunta, ¿ha leído la documentación?

En efecto. La documentation dice usar event.stop();

He mirado lo que otros están diciendo. Este problema es exactamente mi problema. Se marcó como fijo, pero la solución no funciona.

Ideas?

Solución

Una posible solución para el evento de doble clic es deshabilitar el comportamiento predeterminado de Google cuando lo necesite para no disparar y luego volver a habilitarlo.

Haces esto con el argumento disableDoubleClickZoom . Vea la documentación here .

Aquí hay un código para deshabilitar:

map.set("disableDoubleClickZoom", true);

Ahora para volver a habilitar:

map.set("disableDoubleClickZoom", false);

Por supuesto, puede establecer la propiedad en el argumento MapOptions para cuando se cree el objeto de map en primer lugar.


No es una solución sino algunas ideas, según lo solicitado ...

event.stopPropagation() no es una panacea generalizada para problemas de este tipo por dos razones:

  • su controlador de eventos puede estar respondiendo a un evento ya burbujeado, es decir, es demasiado tarde para evitar el manejo de eventos (zoom en este caso) que se activó anteriormente en el ciclo de burbujeo.
  • Puede que no sea un problema de burbujeo, sino un evento que se maneja en el mismo nivel . .addListener() implementa un patrón de observador, lo que significa que las nuevas adiciones se agregan a la cola del "observador concreto" del elemento sin eliminar ningún controlador agregado previamente por el mismo mecanismo.

Sin duda, hay una solución disponible para ambas situaciones, pero probablemente requiera un "conocimiento interno" de Google Maps para resolverlo.

Tal vez alguien más sepa más que yo.


ACTUALIZACIÓN: desafortunadamente, tuve que descubrir que Firefox no hace que el evento actual sea accesible a través de window.event lo que este código no funcionará allí. Todavía no he encontrado una solución para eso.

Resulta que la solución a su código es mínima: simplemente elimine el parámetro de evento de su función de controlador de eventos, accediendo al objeto window.event global dentro del controlador.

El siguiente código de ejemplo me funcionó en IE y Chrome, pero no en 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(); });

Esta respuesta me puso en el camino correcto!