OpenLayers 3 - 地圖頂部的Div無法捕獲點擊

Question

我在地圖頂部顯示了一個表格/ div。我想讓它在隱藏在form/div區域之外的時候隱藏，但是當點擊在form/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> 

輸出

點擊了#map

點擊了#popup

正如你可以在代碼中看到我試着在彈出的檢測點擊幾個不同的方法但他們都沒有工作。他們都好像彈出窗口不在那裏。

我正在使用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>