OpenLayers overlay bubbling problem

Question

Regarding on the previous question asked https://gis.stackexchange.com/a/303372/119333, solution from best answer is implemented and its working. I am rendering tab panel inside popup overlay and you can click on tabs without click bubbling further on map. Now I added button inside my tab panels and when i click on that button (yellow) it bubbles to map and executes map.on('click',function()), ignores if statement despite fact mouseOver variable is true.

Code: Button rendered inside table row in tab panel:

<tr style="background:#D7DBDD;visibility:visible" id="brug"><td>BROJ UGOVORA</td><td><button id="brugovoratrigger" onClick="pozoviUgovor(this)" style="background:yellow">'.$row['broj_ugovora'].'</button></td></tr>

JS:

var ug=document.getElementById('brug');

ug.addEventListener('mouseover',function(){
map.getInteractions().forEach(function(interaction){
interaction.setActive(false)
mouseOver=true
   })
})

map.on('click',function(e){
if(mouseOver){ return }
else {
map.removeOverlay(popup)
var coor=e.coordinate
...

Answer 1

When transitioning between nested elements, a mouseout event followed by a mouseover event will be triggered, so the map click event is available again for some time.

You can try using the mouseenter and mouseleave events instead

This tutorial is worth reading

Answer 2

Popup overlay definition is missing in the question and so is version of OpenLayers you are using, so it's hard to say why it doesn't work for you.

Example below (base code taken from OpenLayers example https://openlayers.org/en/latest/examples/popup.html) works as expected in OpenLayers 5.3.0, without using mouseover event. Mouse click on popup overlay stays there and does not propagate to map.

<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
  <div id="popup-content">
    <table style="width: 100%">
      <tr>
        <td>Some text</td>
        <td>
          <button id="myButton" type="button" onclick="processButtonClick(this);">Click Me!</button>
        </td>
      </tr>
    </table>
  </div>
</div>

<script>
  var container = document.getElementById('popup');
  var content = document.getElementById('popup-content');

  function processButtonClick(element) {
    console.log('button click: ' + element.id );
  };

  var overlay = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
      duration: 150
    }
  });

  var layer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

  var map = new ol.Map({
    layers: [layer],
    overlays: [overlay],
    target: 'map',
    view: new ol.View({
      center: [0, 0],
      zoom: 3
    })
  });

  map.on('singleclick', function(evt) {
    console.log('map click');
    var coordinate = evt.coordinate;
    overlay.setPosition(coordinate);
  });
</script>