How to ignore mouse clicks outside canvas

I’m building a web page interface that has a slim div + form to the left for user information input and a threejs canvas rendering to the right side (taking up most of the window, but not all).

This is working well and I’ve already adjusted my mouse click location to account for the offset, but unfortunately my mouse clicks inside the non-canvas form to the left are still triggering camera movement events within the threejs rendering.

How do I force my code to only do things when the click falls inside the three js rendering canvas and ignore all other clicks?

What do you add your event listener to?

1 Like

Ok I’m thoroughly embarrassed. I’ve added the mouse click event listeners to the right side rendering div and it works now. Thanks.

1 Like