OpenLayers使用Popups窃取点击事件

时间:2012-05-04 11:52:40

标签: javascript javascript-events openlayers

为什么FramedCloud弹出窗口会在弹出窗口中窃取点击事件?

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

除了点击弹出窗口内的链接外,始终捕获点击事件。弹出窗口和锚点是#map的后代。

  • 点击地图=&gt;回调被解雇
  • 点击一个标记=&gt;回调被触发,显示弹出窗口
  • 点击弹出内部(不在链接上)=&gt;回调未被解雇
  • 点击弹出窗口内的链接=&gt;同样的,没有任何反应

OL的那部分代码非常模糊。

为什么它会抓住弹出窗口内的点击?我该如何收回它们?

编辑:在OL中深入调试:触发此功能:

bindAsEventListener: function(func, object) {
    return function(event) {
        return func.call(object, event || window.event);
    };

event.target是锚,正是我所期待的:

<a class="edit-card-link" href="/form/?id=806">...</a>

func是:

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是OpenLayers.Event类实例,evt.target仍然是该锚点,listeners包含1个侦听器:

function (evt){OpenLayers.Event.stop(evt,true);}

这是原因吗?我该怎么把它拿出来?

2 个答案:

答案 0 :(得分:3)

如果你想阻止弹出窗口中的鼠标事件,那么在CSS你可以,as suggested here中,设置pointer-events: none;对应于其中给出的弹出ID的id #featurePopup{ pointer-events: none; } 创建。因此,在您的情况下,它将是:

mouseover

当我想避免在{{1}}上显示的弹出窗口闪烁时,它对我来说就像是一种魅力。

答案 1 :(得分:2)

我做了另一种方式。我让OpenLayers捕获事件,但在此之前我会触发另一个事件。

 $('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;
 });