OpenLayers steals click events with Popups
dom-events, javascript, openlayers
Solution
I did it another way. I let OpenLayers capture the event, but before that I trigger another one.
$('a', current_popup.contentDiv).on('click', function(evt) {
var jtarget = $(evt.target);
hide_popup(); // hides OpenLayers popup
$(document).trigger('edit_link_clicked', {
feature: features[jtarget.parent().find('a').index(jtarget)],
cluster: f,
url: jtarget.attr('href')
});
return false;
});
Problem
Why does FramedCloud popup steal click events inside the popup? ``` current_popup = new OpenLayers.Popup.FramedCloud( "featurePopup", f.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(0,0), "<b>Наблюдения</b><br/>" + $.map(features, function(fe) { return fe.attributes.description; }).join('<br/>'), null, false, null); map.addPopup(current_popup, true); $('#map').on('click', function() { console.log('test'); return false; }); ``` Captures click events always except when I click a link inside a popup. The popup and the anchors are descendants of `#map`. - Click the map => callback is fired - Click a marker => callback is fired, popup is shown - click inside popup (not on a link) => callback is not fired - click a link inside a popup => same way, nothing happens The code in that part of OL is quite obscure. Why does it catch clicks inside the popup? How do I take them back? edit: debugging deeper in OL: this function is fired: ``` bindAsEventListener: function(func, object) { return function(event) { return func.call(object, event || window.event); }; ``` `event.target` is the anchor, exactly what I expect: ``` <a class="edit-card-link" href="/form/?id=806">...</a> ``` `func` is: ``` handleBrowserEvent: function(evt) { var type = evt.type, listeners = this.listeners[type]; if (!listeners || listeners.length == 0) { return; } var touches = evt.touches; if (touches && touches[0]) { var x = 0; var y = 0; var num = touches.length; var touch; for (var i = 0; i < num; ++i) { touch = touches[i]; x += touch.clientX; y += touch.clientY; } evt.clientX = x / num; evt.clientY = y / num; } if (this.includeXY) { evt.xy = this.getMousePosition(evt); } this.triggerEvent(type, evt); } ``` `this` is OpenLayers.Event class instance, `evt.target` is still that anchor, `listeners` contains 1 listener: ``` function (evt){OpenLayers.Event.stop(evt,true);} ``` Is this the reason? How do I take it out?