Hey everyone 
I’m working on this project, which is composed of three main objects: The outer grey rectangle (id = “box”), the inner rectangle with the black border (id = “play-box”), and the small blue square (id = “shadow”).
The way it’s supposed to work is that the location of the blue box in the inner rectangle is the opposite of the the position of the mouse cursor in the outer rectangle. For example, if the mouse is at the bottom right of the outer rectangle, the blue box should be at the top left of the inner rectangle. If the cursor is at the middle bottom of the outer rectangle, the blue box should be at the middle top of the inner rectangle, and so on.
The function that determines the position of the mouse relative to the outer rectangle is fired by an event listener attached to that outer rectangle, and uses event.offsetX and event.offsetY to determine that position.
The problem is that whenever the mouse cursor is inside the inner rectangle, it takes offsetX/Y relative to the inner rectangle instead. How do I prevent this from happening, or otherwise fix the issue?
Thank you!