click mouse position with scroll in javascript

Question

I have code to get x-y coordinates when the browser scrolls:

left1 = window.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
t         


        

Answer 1

Remember that the click event is handled differently in Mozilla than it is in internet explorer. Also they hold different ways of attaining the position of the cursor location. This is a very easy google search to get the specifics on either.

---

 var IE = document.all ? true : false; // check to see if you're using IE

if (IE) //do if internet explorer 
        {
            cursorX = event.clientX + document.body.scrollLeft;
            cursorY = event.clientY + document.body.scrollTop;
        }
        else  //do for all other browsers
        {
            cursorX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
            cursorY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
        }

Also note that you should have something like the following in your initialization code:

if (window.Event) {
            if (window.captureEvents) { //doesn't run if IE
                document.captureEvents(Event.MOUSEMOVE);
            }
        }
        document.onmousemove = refreshCursorXY;

On the click side of things as I said there is differences in what value the click is attributed between browsers. For example, this check should happen in your click event (that you send e, the event, to). e will not be sent by I.E. so we do it like so:

//internet explorer doesn't pass object event, so check it...
        if (e == null) 
        {
            e = window.event;
        }

        //1 = internet explorer || 0 = firefox
        if ((e.button == 1 && window.event != null || e.button == 0)) 

And again, there are many differences between IE and other browsers, thus there is much documentation. Google searches can do wonders if you require further information on the subject.

Answer 2

The following JS works in IE 8 and firefox 3.6.17

function getScrollingPosition()
{
var position = [0, 0];
if (typeof window.pageYOffset != 'undefined')
{
position = [
window.pageXOffset,
window.pageYOffset
];
}
else if (typeof document.documentElement.scrollTop
!= 'undefined' && document.documentElement.scrollTop > 0)
{
position = [
document.documentElement.scrollLeft,
document.documentElement.scrollTop
];
}
else if (typeof document.body.scrollTop != 'undefined')
{
position = [
document.body.scrollLeft,
document.body.scrollTop
];
}
return position;
}

This article also may help. http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html

Answer 3

Only IE puts the event information in the global window object. All other browsers follow the W3C recommendation that event information be passed to the listener callback registered on an element. You will also need to use element.addEventListener() instead of element.attachEvent(). See the addEventListener() documentation on the Mozilla Developer Network.