In normal development often met need to get a wide variety of issues highly events and event objects, each wasted a lot of time has not yet access to a deep understanding of, so to sum up
The event object event
screenX / screenY
click position according to the distance on the left (computer) screen / above, note that not from the browser window position
clientX / clientY
click position from the left of the window / top of the distance, does not include a toolbar
offsetX / offsetY
click on the element position from the boundary of X / Y coordinates
pageX / pageY
click position coordinates from the page (document) if there is no scroll bar, then clientX / clientY is a meaning, if scroll bars appear so not the same
The target object (element)
offsetWidth / the offsetHeight
Content padding + border element +
the offsetLeft / the offsetTop
acquired from the parent element from the left with a positioning position (not limited to the direct parent), if no data was found from the body
clientWidth / clientHeight
client area size , returns the contents and size of the padding share
scrollWidth / scrollHeight
determine the total content of the scroll width / height
scrollLeft / scrollTop
scroll is hidden on the left / top size, can also be set
other
element.getBoundingRect()Distances can obtain position information of the viewport
