click mouse position with scroll in javascript

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

left1 = window.event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
top1 = window.event.clientY + document.body.scrollTop + document.documentElement.scrollTop;

This is working in IE7, but not in Mozilla Firefox 3.5.19. How can I get it working in Firefox?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

Method 2

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.

Method 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.


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x