Bubbling up mouse events outside of an IFrame

I have a transparent IFrame that covers the whole page (imagine an IFrame on top of the Google Maps). The IFrame has some UI elements (like menus) so I would like to be able to handle mouse events inside the IFrame in order to interact with the menus, but I want to bubble them up to the parent window if the events were not handled by the IFrame UI.

I am able to successfully pass events to the parent using messaging. I am also able to trigger the events using dispatchEvent, however some UI elements on the page don’t behave as expected. For instance, the text can’t be selected, the texbox doesn’t get the focus, the button is not visually clicked (event though it does get the click event).

Am I trying to do something impossible? Is there a way to trigger events “for real” as if they were caused by the user actions?

Here is he main page:

window.addEventListener('message', (event) => {

  let mouseEvent = new MouseEvent(event.type, event.data);
  let elements = document.elementsFromPoint(mouseEvent.x, mouseEvent.y);
  if (elements.length < 2) return;

  let element = elements[1];
  mouseEvent.currentTarget = element;
  mouseEvent.target = element;

  element.dispatchEvent(new MouseEvent(event.data.type, event));
});
<input type="text" id="text" />
        
<button onmousedown="console.log('clicked')">Click</button>

Some text

<iframe id="frame" style="position:absolute; top: 0px; left: 0px; width: 100%; height: 100%" src="iframe.html"></iframe>

Here is the IFrame:

document.onmousedown = bubleUp;
document.onmouseenter = bubleUp;
document.onmouseleave = bubleUp;
document.onmousemove = bubleUp;
document.onmouseout = bubleUp;
document.onmouseover = bubleUp;
document.onmouseup = bubleUp;
document.ondblclick = bubleUp;
document.oncontextmenu = bubleUp;
document.onclick = bubleUp;

function bubleUp (event) 
{
    let pojo = {};

  // Strip off all the props that can't be serializaed into a mesasge
  for (let key in event)
  {
      let value = event[key];
      if (value instanceof Window || value instanceof Node || value instanceof InputDeviceCapabilities || typeof value === 'function')
          continue;

          pojo[key] = value;
  }

  sendMessageToParent(pojo);
}

function sendMessageToParent(data) {
  window.parent.postMessage(data, '*'); // Send message to parent window
}
<body style="width:100%; height: 100%;">

</body>