OpenLayers通过弹出窗口窃取点击事件

Question

为什么 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 的后代。

• 点击地图 => 回调被触发
• 点击标记 => 回调被触发，弹出窗口被显示
• 在弹出窗口内部点击（不是链接）=> 回调不会被触发
• 点击弹出窗口内的链接 => 同样地，什么也不会发生

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 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 是 OpenLayers.Event 类的实例，evt.target 仍然是那个锚点，listeners 包含一个监听器：

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

这是原因吗？我该如何将其移除？

- culebrón

Answer 1

如果你想阻止弹出窗口窃取鼠标事件，那么在你的CSS中，可以像这里建议的一样，为创建弹出窗口时指定的id设置pointer-events:none;。因此，在你的情况下，应该是：

#featurePopup{
    pointer-events: none;
}

当我想要避免弹出窗口在mouseover事件触发时的闪烁问题时，这对我非常有帮助。

- Boro

---

看起来 pointer-events 在 IE 中不被支持：http://css-tricks.com/almanac/properties/p/pointer-events/ - colllin

谢谢Boro！我一下午都在尝试解决那个鼠标悬停弹出窗口闪烁的问题。 - sfletche

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

- culebrón

---

这感觉很不对，但它却有效，感觉就是对的。我的点击事件被矢量要素所遮挡，所以我的解决方法看起来更像是：myVectorLayer.events.register('click', null, function(e) { var map = myVectorLayer.map; var offset = jQuery(map.div).offset(); map.events.triggerEvent('click', {xy: {x: e.x - offset.left, y: e.y - offset.top}, target: document.body}); }, true); - colllin