Question

I am using a jquery plugin to display page. I am able to capture coordinates of entire page in Chrome and IE but when i try to do the same with Firefox, it captures the screen coordinates and not the page. Can somebody help.

Code :

$('.page').bind('click', function(event) {      

    var x;
    var y;


    if (!(event.offsetX || event.offsetY)) {

     x = event.clientX;
         y = event.clientY;

        }
        else {
            x = event.offsetX;
            y = event.offsetY;
        }               

    alert("x :" +x +", y: " +y);
}); 

Answer 1

As you’re using jQuery, use the pageX and pageY attributes of the event object that jQuery normalizes for you. From that link:

Event Properties

jQuery normalizes the following properties for cross-browser consistency:

• target
• relatedTarget
• pageX
• pageY
• which
• metaKey

(My emphasis.)

Those will reliably be relative to the document. If you’re trying to get coordinates relative to the element in which the event occurred, you can find that element’s position via offset and then do the math:

$(".page").click(function(event) {
    var pos = $(this).offset();

    console.log("Click relative to document: " + event.pageX + "x" + event.pageY);
    pos.left = event.pageX - pos.left;
    pos.top  = event.pageY - pos.top;
    console.log("Click relative to element:  " + pos.left + "x" + pos.top);
});

Live Example | Source