[GIS] 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
...

Here is picture of what I am talking about:

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