Understanding MouseEvent properties clientX and pageX

I am working in a section of the application which is going to require the user to be able to do a number of different operations. What I need to use for this are different kinds of MouseEvent properties, however it is important understanding them to use them in the most effective way.


The clientX as well as the Y equivalent clientY, provides us with the horizontal coordinate and vertical coordinate of the event inside the application area. What does this means? It means that regardless of scrolling, clicking on the same spot on the screen will return always the same value.
Essentially it works a little bit like if the element had a position: fixed since it would interact with the page without caring for the scroll event.


The pageX and pageY gives us the position of the event with respect to the whole document, hence these are going to account for the scroll position within the page.


To move an element within the document then, what we want to use it is simply the pageX and pageY properties, because they account for scrolling as well.
As an example here it is how a simple dragging of an element can be scripted:

var isMoving = false;
var draggedElement;
document.addEventListener('mousedown', function (e) {
  var isDraggable = e.target.classList.contains('corner-wrapper');
  if (isDraggable) {
    draggedElement = e.target;
    isMoving = true;
}, false);

document.addEventListener('mouseup', function (e) {
  if (isMoving === true) {
    draggedElement = null;
    isMoving = false;
}, false);

document.addEventListener('mousemove', function (e) {
  if (isMoving === true) {
    draggedElement.style.top = e.pageY + 'px';
    draggedElement.style.left = e.pageX + 'px';
}, false);