how to pass through click event from iframe to cesium

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

i im finding solution to pass click event from iframe to cesium viewer

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

in my webpage, i put an iframe element over the cesium container ,

and the iframe element is 100% cover the cesium container, 80% of the iframe is transpanrent and that is where need to pass through mouse event

the interface****dispatchEvent in the code below can trigger the click event of window ,but cesium viewer do not recerive it。

i have try the css pointer-events:none ，but it will disable all the click of the element inside of the iframe and set the div’s in the iframe to pointer-events:all is not work too

var event = document.createEvent(‘MouseEvents’);

event.initMouseEvent(‘click’, true, true, window, e.detail, e.screenX, e.screenY, e.clientX, e.clientY,

e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,

e.button, e.relatedTarget);

window.dispatchEvent(event);

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

odd and complex demand of our production design，and the iframe is the easiest way to do it

4. The Cesium version you’re using, your operating system and browser.

cesium:1.43.0

os:windows 10

browser:chrome 70

ps：this is my first time to ask a question in english , sorry for my bad english

2

It sounds like setting the parent to pointer-events:none and the children to pointer-events:all is the right way to do it (based on https://magento2x.com/htmlcss-make-clickable-transparent-div-layer/ and a couple of other resources), so I’m surprised it’s not working.

I would try this with a simple page without CesiumJS just to narrow the problem to see if it is something Cesium is doing or just a CSS issue.

For context, this is where CesiumJS registers its mouse events:

https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/Core/ScreenSpaceEventHandler.js