| Issue 2172: | Stop event propagation | |
| 49 people starred this issue and may be notified of changes. | Back to list |
After registering e.g. a dblclick handler on a polygon, it should be
possible to prevent that event from bubbling up and triggering another
handler as well (e.g. map zoom for dblclick).
google.maps.event.addListener(area, 'dblclick', function(event) {
// ...
event.stopPropagation();
});
Apr 1, 2010
Issue 2272 has been merged into this issue.
Apr 1, 2010
Issue 2273 has been merged into this issue.
Apr 1, 2010
I've put a hack in my code to get around this issue, but would really like proper support for it. Either pass the overlay into the event handler (as was done in v2), or the stop propagation idea proposed above. However, right now the map event is triggered before the overlay event. That would need to be reversed. Thanks! (And sorry for the 2 duplicate issues. I was suffering from a Google Chrome bug when I filed 2272/2273.)
Apr 20, 2010
Same think with click event : - I add click event to my map object - I add click event on a polyline object If I click on polyline, first callback is map click, and polyline click comes after
Apr 28, 2010
(No comment was entered for this change.)
Status:
Acknowledged
Labels: Internal-2639550
May 5, 2010
dualrudder (or anyone else), how did you get around this issue?
May 5, 2010
In my case, the map click needs to issue an AJAX call to get text from the server versus the polyline click opens an info window immediately. Every time an info window is opened I increment a counter. The map click call passes the info window count to the AJAX callback function, and if that value doesn't match the current value the AJAX handler doesn't open it's info window. Ugly, but it works. The same thing could be accomplished with a setTimeout instead of an AJAX call. This issue is a real killer. I hope we get a fix sooner rather than later. Dave
Jun 28, 2010
I'm having big problems with this. What is strange is that everything works fine with markers, that block properly click events from being triggered by the underneath map. Wouldn't be easy to just extend this masking functionality to polylines? So if a user clicks on a polyline I don't get two different callbacks? Has anybody found a solution to have the first event (map click) masked, so I can use properly the polyline click event? (I looked at solution by dualruder, but looks like is not useful in the opposite sense). Thanks! Jac
Jun 29, 2010
(No comment was entered for this change.)
Owner:
thor.mitchell
Sep 1, 2010
Now that the events are reversed, is google have made changes in apis to support stop event propagation?
Dec 25, 2010
i have disabled double click zoom and double click on map creates a marker on map in my app. also i'm adding a double click listener on marker and double click on a marker opens an edit window for marker attributes like name description etc. somehow i need to be able to prevent event bubbling because double clicking on a marker fires also the map's double click event which ruins the logic here you can guess..
Apr 2, 2011
I'm just getting started with google maps API and was having a hard time believing that there wasn't a stop propagation/cancel bubble method for overriding default map behaviors. Shouldn't there be something like: google.map.event.stopPropagation(event); ???
Jun 23, 2011
Did anyone find the answer to stopping event propagation ? I've just run into the exact problem...
Jun 30, 2011
Anyone know if this issue is going to be resolved? Would be nice to have this functionality. It is possible to stop the propagation of the event in Chrome and IE but Firefox, which doesn't use populate window.event doesn't work. Would be good to have the event passed as a parameter to the function...
Feb 1, 2012
i was able to do this with a simple workaround:
in my overlay click callback function I disabilited the double click zoom:
map.setOptions({disableDoubleClickZoom:true});
and i added a dblclick listener to the map:
google.maps.event.addListener(map,'dblclick',
function(e){
this.setOptions({disableDoubleClickZoom:false});
});
in this way the map doesn't zoom when i click on my overlay, but only when i actually want it to do it
Feb 19, 2012
Now, you can use event.stop()
Status:
Fixed
Jun 6, 2012
Not sure this has been implemented properly. I'm calling event.stop(); in an event handler triggered by dblclick and it still applies the zoom.
Jun 27, 2012
Well I noticed an interesting use of `apply` in the InfoBox overlay example code. Why not go with the flow?
InfoBox.prototype.createElement = function() {
// Stuff
var thiz = this;
google.maps.event.addDomListener(closeImg, 'click',
function(event) {
// Pass `event` in after explicitly
// setting the callee's `this`
return thiz.removeInfoBox.apply(thiz, [event]);
}
);
};
InfoBox.prototype.removeInfoBox = function(e) {
// Now we have: this instanceof InfoBox === true
// Go ahead and massacre those bubbles
e.cancelBubble = true;
if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault(); else e.returnValue = false;
};
Apr 3, 2013
northeffects, did you ever solve this? I'm having the same dblclick -> zoom issue. I'm also having an issue where my marker clicks propagate to map click events, despite what the documentation says about the map click event.
Sep 18, 2015
It seems I found a solution to the problem: use the global window.event object prevent further processing.
Consider this piece of code:
google.maps.event.addListener(map, "dblclick", function(googleMapsEvent) {
// log away to the console
console.debug("caught double click");
// reference the global window.event object
// ignore the googleMapsEvent passed in by Google Maps!
event.preventDefault();
});
This handler successfully prevents zooming in the map after double-clicking on it even when disableDoubleClickZoom=false.
Of course, stackoverflow helped me with this answer: http://stackoverflow.com/a/10006942/177710 :-)
Sep 18, 2015
Follow up --------- I've put together a blog post on the topic that can be found here: http://shades-of-orange.com/post/2015/09/18/Stop-Propagation-of-Google-Maps-Marker-Click-Event-a-Solution! |
|
| ► Sign in to add a comment |
Totally agree, could be very useful, I'm making an app and I have this particular situation: google.maps.event.addListener(polygon, 'mousemove', function(event) { // ... }); But this is also triggering the event 'mousemove' of the map itself that I need to use for something else. In Google Maps v2 you could do things like: GEvent.bind(map, 'click', this, function(overlay, latlng, overlayLatlng) { if (overlay) {return;} ... But in v3 we don't have the "overlay" parameter anymore ... By the way, don't you have an equivalent of the "bind" function in v3?, I've needed to create a closure myself to pass a "binded" function to the events.