Event coordinates and element dimentions on a page

Often times you will find yourself in a situation where you need to get the width and height of an element or the coordinates of a mouse click or mouse move. Therefore, I created a very simple illustration to help you easily determine what property you need to get for your needs.

Event coordinates

Diagram showing the properties relative to the mouse event.

Element coordinates

Diagram showing the properties of a element with respect to its parent. The one with the green outline is the parent and the one with the red outline is the child. In this case, the child is larger than the parent and overflows out of it in both x and y directions. There are several more but most of the time, the ones you see here will be sufficient.

events 1