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.

Did you like this?
Tip admin with Cryptocurrency

Donate Bitcoin to admin

Scan to Donate Bitcoin to admin
Scan the QR code or copy the address below into your wallet to send some bitcoin:

Donate Bitcoin Cash to admin

Scan to Donate Bitcoin Cash to admin
Scan the QR code or copy the address below into your wallet to send bitcoin:

Donate Ethereum to admin

Scan to Donate Ethereum to admin
Scan the QR code or copy the address below into your wallet to send some Ether:

Donate Litecoin to admin

Scan to Donate Litecoin to admin
Scan the QR code or copy the address below into your wallet to send some Litecoin:

Donate Monero to admin

Scan to Donate Monero to admin
Scan the QR code or copy the address below into your wallet to send some Monero:

Donate ZCash to admin

Scan to Donate ZCash to admin
Scan the QR code or copy the address below into your wallet to send some ZCash:

Comments are closed, but trackbacks and pingbacks are open.