在 ol-overlaycontainer-stopevent 中事件未传递到 Bootstrap 选项卡

Question

我正在使用 OpenLayers 3 制作地图界面。选择矢量特征会弹出一个小控制面板（扩展 ol.control.Control）。我正在尝试使用 Twitter Bootstrap 向此控制面板添加多个选项卡，但我发现触发选项卡切换所需的事件没有进入 Bootstrap。我查到这是因为控件被放置在 <div> 和 CSS class ol-overlaycontainer-stopevent 中，这在某种程度上阻止了 Bootstrap 中的听众听到事件。

这是我正在尝试做的 stripped down JSFiddle example。您可以看到单击选项卡没有执行任何操作。知道如何确保此事件到达 Bootstrap 选项卡侦听器吗？

P.S。从 Bootstrap 源代码看来，监听器是由

定义的

$(document)
    .on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler)
    .on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler)

Answer 1

您没有将 click 事件添加到您的页面，因此请添加：

$('#prop-box-content li > a').click(function (e) {
  e.preventDefault();
  console.log(e.target);
  $(this).tab('show');
});

在 ol-overlaycontainer-stopevent 中事件未传递到 Bootstrap 选项卡

Events not being passed to Bootstrap tabs when in ol-overlaycontainer-stopevent

twitter-bootstrap

openlayers-3