OpenLayers overlay bubbling problem

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

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>