Difference between client coordinates and screen coordinates in Javascript Mouse Event objects

The 4 coordinate parameters in a Javascript mouse event object are very confusing. screenX and screenY are called screen coordinates which represent the position  relative to the top-left of the computer screen. clientX and clientY are called client coordinates which represent the position to the top-left corner of the client area. What is the client area? The client area is the area of the browser’s window which is under the menu and tool bar. The confusion comes from two sources. The first confusion is that somebody says the client area is the area occupied by the element that the event is happening. This is not true. The second confusion is that in the 4 parameters, only two are independent such as  screenX and screenY (or clientX and clientY). The other two are not independent in that clientX and clientY must be consistent with screenX and screenY.

Comments are closed, but trackbacks and pingbacks are open.