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

我有一个表单/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>

//表格的输入数据
映射打开（'click'，函数（evt）{
log（'Clicked#map'）；
//我从另一个堆栈溢出答案尝试了一种方法
（evt.target！==此）？$（“#popup”）.show（）：$popup.hide（）；
var feature=map.forEachFeatureAtPixel（evt.pixel，
功能（特征）{
返回特性；
});
如果（功能）{
loadInfo（feature.get（'id'））；
$（“#弹出窗口”）.show（）；
} 
});
$（“弹出窗口”）。在（'click'，函数（e）{
e、 停止传播（）；
console.log（'Clicked#popup'）；
});

输出

点击#地图

单击#弹出窗口

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

如果有必要，我将使用openlayers3。

您可以在捕获和冒泡阶段使用以防止当前

单击事件的进一步传播：


var$map=$（'#map'），
$popup=$（“#popup”）；
$map.on（'click'，函数（e）{
log（'Clicked#map'）；
（e.target！==此）？$popup.show（）：$popup.hide（）；
});
$popup.on（'click'，函数（e）{
e、 停止传播（）；
console.log（'Clicked#popup'）；
});
#地图{
背景颜色：灰色；
宽度：80%；
高度：120px；
保证金：自动；
填充：40px；
}
#弹出窗口{
背景色：#000000；
颜色：#ffffff；
宽度：60%；
保证金：自动；
填充：20px；
}

//表格的输入数据
我很感谢你花了这么多时间来写这个答案，但它不起作用。无论我在弹出窗口内部还是外部单击，弹出窗口都会消失。如果您在
#map
中单击，则
#弹出窗口应消失。。但是如果你点击弹出窗口，它应该保持可见。。对吗？对。它仍然不起作用。我认为这与地图是画布有关。你说得对，事件正在冒泡并触发#地图点击事件。。立即检查即使在e.stopPropagation（）之后，它仍会检测到在#map上的单击。从日志中，似乎总是首先在地图上检测到点击，然后在弹出窗口中检测到点击。这真让我困惑。