Get X/Y Coordinates on Button using 'onclick' and JavaScript

Question

I am a JavaScript beginner and am looking for a way to get the x and y coordinates on a button when it's clicked. This works in Opera, IE9 and Chrome but I can't get it to work in Firefox. Here is my code so far:

Function in JavaScript:

function buttonClick(subEvent)
{
    var mainEvent = subEvent ? subEvent : window.event;

    alert("This button click occurred at: X(" +
    mainEvent.screenX + ") and Y(" + mainEvent.screenY + ")");
}

Here is the HTML section:

<input type="button" onclick="buttonClick()" value="Submit"/>

The idea here is to only get the coordinates when the button is clicked and to get the actual coordinates within the border of the button itself. Getting coordinates on the screen is easier and finding that solution for all browsers was already accomplished.

Thanks in advance for any assistance.

Answer 1

You need to pass on the event. This is done as so:

<input type="button" onclick="buttonClick(event)" value="Submit"/>
                                            ^
                                            '---- that one there