I have a three.js based 3d scene which occupies the whole window.
I have angular load up a html overlay, which occupies a column of enarly 20% width on the right side.
I m using something similar to this to know where an event has occured - Javascript event handler on body but not on input
Now the problem is after I click on a checkbox on the html overlay. Any future keyboard event (for e.g. w,a,s,d for moving the camera in my 3d scene) has target = input.
Even If I click on the 3d scene and initate keyboard event the target is input.
I have to remove the html overlay and then all future keyboard events have target body.
How do I allow the user to switch the event target without removing the html overlay?