How to make sure events fire on the appropriate DIV?

Question

I have the following 2 possible HTML structure

<div id="threeJSContainer">
</div>
<div id="UIControls">
    <div ng-include src="'scripts/angular/UI.html'"></div>
</div>

The above code lets me insert a rich text editor inside the UIControls div which works as expected. But as the UICOntrols use CSS which positions it absolute on top of the full screen consuming threeJSContainer the mouse event on threejs 3d scene instead get fired on the UIControls div.

<div id="threeJSContainer">
    <div id="UIControls">
        <div ng-include src="'scripts/angular/UI.html'"></div>
    </div>
</div>

This code fires the mouse event appropriately and I am able to move my threejs scene with mouse controls, but now as UICOntrols is a sub div inside the threeJScontainer the rich text editor plugin textAngular doesnt work as expected. The typing works fine but the mouse events dont work at all, except selecting the rich text editor box to type in .

Answer 1

Dont overlap the divs and the mouse event will has different targets

Use the first code and put the div#threeJSContainer position also as absolute, only you need put the first div under the second div with the top css tag