Events Overwritten in ASP.AJAX on IE7

Question

Greetings!

I'm calling a Web service from Javascript when a user clicks on a link. I need to get the coordinates where the user clicked so that I can display a DIV in an appropriate location. My client-side script looks like the following:

var g_event;

function DoWork(event, theId) 
{
    if (IsIE())
       g_event = window.event;
    else
        g_event = event;

    Acme.WebServices.Worker.GetInformation(theId, DoWorkSuccess);
}

function DoWorkSuccess(result) 
{
    var l_elemDiv = document.getElementById("content-area-div");
    DisplayAreaDiv(g_event, l_elemDiv, result);
}

It's used like this:

<a href="" onclick="DoWork(event, "help");">Help</a>

This works great in Firefox, Safari, and Opera. In IE7, not so much. For example, if I place the following code at the end of both the DoWork() and DoWorkSuccess() functions:

alert(g_event.clientX + ", " + g_event.clientY);

In IE, I'll get two alerts; the first one has correct coordinates, but the second one (which displays on top of the first one) is simply "[object]". Since that "[object]" one is the last one, my DIV is incorrectly displayed in the top left of the browser window. Is there a way I can prevent IE from giving me a second "bad" event? Thanks.

Answer 1

Have you tried setting window.event.cancelBubble = true in your DoWork function?

If not, quirks mode has good article on events and event bubbling - http://www.quirksmode.org/js/events_order.html that has helped me a lot with these kinds of issues.

Answer 2

Why not extract and save the coordinates in DoWork and simply use them in DoWorkSuccess rather than saving the event. Of course this won't work if there is more data you are extracting from the event.

var client_x;
var client_y;

function DoWork(event, theId) 
{
    var g_event;
    if (IsIE())
       g_event = window.event;
    else
        g_event = event;

    client_x = g_event.clientX;
    client_y = g_event.clientY;

    Acme.WebServices.Worker.GetInformation(theId, DoWorkSuccess);
}

function DoWorkSuccess(result) 
{
    var l_elemDiv = document.getElementById("content-area-div");
    DisplayAreaDiv( { clientX : client_x, clientY : client_y }, l_elemDiv, result);
}