OpenLayers 3 - 地图顶部的 Div 未捕获点击

Question

我在地图上方显示了 form/div。我想让它在 form/div 区域外单击时隐藏，但在 form/div.

区域内单击时不隐藏

我无法检测到 div 中的点击何时完成。相反，form/div 内的所有点击都被检测为在地图上完成，就好像 div 不存在一样。

<div id="map"  class="map"><div id="popup">
//input data of form
</div>  </div>


<script>
 map.on('click', function(evt) {
  console.log('Clicked #map');
          //one method I tried from another stack overflow answer 
           (evt.target !== this) ? $("#popup").show() : $popup.hide();

        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature) {
              return feature;
            });

        if (feature) {
          loadInfo(feature.get('id'));
          $("#popup").show();
        } 
      });

$("popup").on('click', function(e) {
  e.stopPropagation();
  console.log('Clicked #popup');
});
    </script>

输出

Clicked #map

Clicked #popup

正如您在代码中看到的那样，我尝试了几种不同的方法来检测弹出窗口上的点击，但其中 none 有效。都好像，弹窗都没有

如果重要的话，我正在使用 openlayers3。

Answer 1

您可以使用 Event.stopPropagation() 来阻止当前 click 事件在捕获和冒泡阶段的进一步传播：

var $map = $('#map'),
    $popup = $('#popup');

$map.on('click', function(e) {
  console.log('Clicked #map');
  (e.target !== this) ? $popup.show() : $popup.hide();
});

$popup.on('click', function(e) {
  e.stopPropagation();
  console.log('Clicked #popup');
});

#map {
  background-color: grey;
  width: 80%;
  height: 120px;
  margin: auto;
  padding: 40px;
}

#popup {
  background-color:  #000000;
  color: #ffffff;
  width: 60%;
  margin: auto;
  padding: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="map"  class="map">
  <div id="popup">
    // input data of form
  </div>
</div>

OpenLayers 3 - 地图顶部的 Div 未捕获点击

OpenLayers 3 - Div on top of map is not capturing click

javascript

jquery

openlayers-3