What is the difference between “X” and “Client X”

JavaScript
1

Hi there,

What is the difference between “X” and “Client X”
&
"Y’ and “Client Y”

in Mouse coordinates.
Reference.

I just used .X and .Y and it worked.

window.addEventListener('mousemove',function(e){
	document.getElementById('x-axis').textContent = e.x;
	document.getElementById('y-axis').textContent = e.y;
});

The clientX property returns the horizontal coordinate (according to the client area) of the mouse pointer when a mouse event was triggered.

Do they differ in a meeting(Point of intersection - Mathematics it is called origin) of X and Y coordinates? Is custom center(Client X and Client Y) contrary to the default version in just X and Y?

2

x and y are an alias of clientX and clientY. They mean exactly the same thing.

1 Like
3

OK. Thanks.

So,

document.getElementById('x-axis').textContent = e.clientX;
document.getElementById('y-axis').textContent = e.clientY;

and

document.getElementById('x-axis').textContent = e.x;
document.getElementById('y-axis').textContent = e.y;

So the difference is just stylistic or some old fashion version new fashion?
Or there is not much to think about it?

4

clientX and clientY are the normal ones to use. x and y I’m told is experimental.
The css specs say that x and y must return the same value as clientX and clientY.

1 Like
5

OK. Thanks.
So more standard and accepted way to go will be by using ClientX and ClientY.

1 Like
6

For the sake of interest, I didn’t know any of this information before the start of this conversation. Here’s how I worked it all out.

The MDN website is my first place of call. A google search for mdn mouse clientx gets me to the MouseEvent.clientX page, where the breadcrumb navigation takes me to the Mouse Event page.

It is at that mouse event page that MouseEvent.clientX is summarised with "The X coordinate of the mouse pointer in local (DOM content) coordinates."
and MouseEvent.x is summarised with "Alias for MouseEvent.clientX."

At the MouseEvent.x page I’m told that "This is an experimental technology",
and the same page links me to the CSS Object Model specs about the View Module attribute for x which states "The x attribute must return the value of clientX."

Also, at the CanIUse website, a search for mouse clientx and mouse x helps to confirm that x is less supported than clientX.

Hopefully this helps to dispell some rumors about me being a know-it-all, and gives a few tools to help people find their way through similar investigations :slight_smile:

4 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.