I am learning javascript sample from this page,

I am confused about the following code snippets in function XY(e, v), especially the two statements

event.clientX + document.documentElement.scrollLeft 

and

 event.clientY + document.documentElement.scrollTop

Could anyone let me know what is document.documentElement.scrollLeft and document.documentElement.scrollTop? And why we add it to event.clientX and event.clientY please (i.e. what meaningful values we could get when adding them to event.clientX and event.clientY)?

This is for Internet Explorer

I am learning javascript sample from this page,

I am confused about the following code snippets in function XY(e, v), especially the two statements

event.clientX + document.documentElement.scrollLeft 

and

 event.clientY + document.documentElement.scrollTop

Could anyone let me know what is document.documentElement.scrollLeft and document.documentElement.scrollTop? And why we add it to event.clientX and event.clientY please (i.e. what meaningful values we could get when adding them to event.clientX and event.clientY)?

This is for Internet Explorer

• javascript
• html
• internet-explorer

• 1 What is your issue? The question is more about "what are those things?" for that you should search either via Google or at MDC: developer.mozilla/en/DOM – Ivo Wetzel Commented Nov 23, 2010 at 16:41

2 Answers 2

clientX - Gets or sets the x-coordinate of the mouse pointer's position relative to the client area of the window, excluding window decorations and scroll bars. http://msdn.microsoft./en-us/library/ms533567(VS.85).aspx

scrollLeft - Sets or retrieves the distance between the left edge of the object and the leftmost portion of the content currently visible in the window. http://msdn.microsoft./en-us/library/ms534617(VS.85).aspx

In layman's, it is getting the mouse position on the screen (clientX and clientY) then adding that value to the current scroll position (scrollLeft and scrollTop) of the page to get the total pixel position for the point.

I.E. If you've viewing a page that has scrolled 200px down and the mouse click occurs at 200px down the client's viewing area, that would be at 400px down the document.

EDIT:

"Client area of the window" refers to the display area of Internet Explorer that you see/manipulate the page. It starts at 0px 0px in the upper left corner and is as wide/tall as your browser window is open (minus scroll bars, frame, title bar, etc).

In the example it is trying to get the absolute position of the event on the page by accounting for where in the "viewable area" of the browser you made the click and adding that to how far down/right the "viewable area" has scrolled on the page.

I got the same problem using this script on my site http://www.alterboutique.

I found the solution here: experts-exchange

In the bottom of the page, there is a post from Kravimir, he gives the solution replacing the code of the function XY, by his code:

function XY(e,v) {
  e=e||window.event;
  var d=document,dE=d.documentElement,o;
  if(typeof(e.pageX)=='number')
    o={'X':e.pageX,'Y':e.pageY};
  else 
    o={'X':e.clientX+d.body.scrollLeft+(dE?dE.scrollLeft:0),
      'Y':e.clientY+d.body.scrollTop+(dE?dE.scrollTop:0)};
  return(v?o[v]:o);
}