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

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

本文关键字：Div 地图 顶部 OpenLayers      更新时间：2023-09-26

我有一个表单/div显示在地图的顶部。我想让它是隐藏的，当有一个点击在表单/div区域之外，但不是当点击在表单/div内。

我无法检测到点击何时在div内完成。相反，在表单/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>

点击#地图

点击#弹出

正如你在代码中看到的，我尝试了几种不同的方法来检测弹出框上的点击，但没有一种有效。

我正在使用openlayers3

您可以使用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>

相关文章：