Mouse input handler is triggering when cursor is on top of DOM on top of Cesium

When DOM is on top of Cesium and a mouse input handler is attached it will still fire the handler when the cursor is on top of DOM that is in front of the map. The issue is easier to see in the Sandcastle Picking example - http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Picking.html&label=Showcases.

Notice that if you zoom in a bit so that parts of the Earth are behind one of the three menu buttons on the top left it will still show the coordinates of the mouse location on the map when you hover the cursor over one of those buttons.

In our application we have a custom tooltip appear when a primitive is picked on mouse move and that tooltip appears even when there's other DOM covering the map, which is not desirable since the tooltip appears on top of whatever the user is attempting to interact with.

Here is some code that can be pasted into the HTML body & CSS tab to further illustrate the point.

<style>
    @import url(../templates/bucket.css);
</style>

  <div style="z-index: 1000; position: absolute; right: 400px; top: 200px; width: 100px; height: 100px; background-color: #FF0000;">
Some text here
</div>

<div id="cesiumContainer" class="fullSize"></div>

<div style="position: absolute; right: 400px; top: 300px; width: 100px; height: 100px; background-color: #0000FF;">
More text here
</div>

<input type="text" value="input form field 1" style="position: absolute; right: 400px; top: 400px;"/>
<input type="text" value="input form field 2" style="position: absolute; right: 400px; top: 415px;"/>
<input type="text" value="input form field 3" style="position: absolute; right: 400px; top: 430px;"/>

<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar"></div>

Is there a way to avoid this behavior? Is this a bug or expected results?

This is JavaScript’s event propagation. The canvas is behind the elements in question, so events will propagate back there. You can turn it off by giving IDs to your overlaying element(s), and running code like this:

document.getElementById(‘myOverlayElement’).addEventListener(‘mousemove’, function(e) {
e.stopPropagation();
}, false);

–Ed.

Thanks for the info