$(document).on('click', '.entity', function (e) {
...
})
I'm using the above to handle clicking of any "entity" anywhere on my site. It works great everywhere except on maps. I'm creating custom overlays that are each an element with the entity class. This is confirmed in the DOM. All CSS I apply works, however the click event does not seem to propagate up to the document level. I put the alert in for testing, and it does fire. With the click function blank, nothing happens. How can I keep it from blocking?
mymap.gmap3({
map:{
options:{
...
}
},
overlay:{
values: [
...
],
events:{
click: function () {
alert('clicked map entity');
},
...
Checked the following plugin:
/*!
* GMAP3 Plugin for JQuery
* Version : 5.1.1
* Date : 2013-05-25
Line 343: there is function OverlayView(map, opts, latLng, $div)
with the following code:
...
this.onAdd = function() {
var panes = this.getPanes();
if (opts.pane in panes) {
$(panes[opts.pane]).append($div);
}
$.each("dblclick click mouseover mousemove mouseout mouseup mousedown".split(" "), function(i, name){
listeners.push(
google.maps.event.addDomListener($div[0], name, function(e) {
$.Event(e).stopPropagation();
google.maps.event.trigger(that, name, [e]);
that.draw();
})
);
});
listeners.push(
google.maps.event.addDomListener($div[0], "contextmenu", function(e) {
$.Event(e).stopPropagation();
google.maps.event.trigger(that, "rightclick", [e]);
that.draw();
})
);
}; ...
which calls $.Event(e).stopPropagation();
for click and some other events. That obviously stops propagation of events.
Commenting those two lines could resolve this specific issue. But, question is what are the possible consequences.