I'm confused with where this problem is coming from. Most likely I'm just ignorant of this "feature". This code is executed when clicking on an image area to generate a shape on a canvas:
mouseclick = function(e,clicked_area)
{
var area_obj = clicked_area ? clicked_area : this;

//alert('here');
if (! $('#canvas_'+$(area_obj).attr('id')).attr('id'))
{
draw(area_obj);
}
else
{
alert('del');
$('#canvas_' + $(area_obj).attr('id')).remove();
clear_canvas(canvas);
}
};

IE 6/7/8 all seem to traverse too slowly or execute too quickly... not sure what to call it. When the #canvas_foo tag is not present (and it's not until after draw()), processing still enters the else statement. However, if I slow it down with the alert('here'), the if/else operates as expected.

I can also break the expected flow by timing a spacebar hit just right so that it kills off the first alert as soon as it triggers. Something else that makes it seem like some odd speed issue.

Furthermore, I can confirm that it's not double-processing the click because an alert() placed within draw() is not triggered unless the "slow down" alert is uncommented.


What am I missing?

I've stripped down the page and have set up a pair of test pages so that maybe I can get some opinions on this problem.
EDIT: Resolved. Removed links.

The only difference between the two is in the maphilight javascript. The alert-delayed version has the alert before the condition, and (appropriately) the non-delayed version does not. Remember to test this in IE as FF seems to work correctly. And, for reference, here is the latest code portion with those alerts in place:

mouseclick = function(e,clicked_area)
{
var area_obj = clicked_area ? clicked_area : this;

//alert('alerting for delay'); /* Here's the line that's different between the two. */
//if (! $('#canvas_'+$(area_obj).attr('id')).attr('id'))
if (! $('#canvas_'+$(area_obj).attr('id')).length)
{
alert('about to draw on the canvas');
draw(area_obj);
}
else
{
alert('deleting from the canvas');
$('#canvas_' + $(area_obj).attr('id')).remove();
clear_canvas(canvas);
}
};

Ugh... resolved. I guess all it takes is posting the question and then I can figure out the problem.

In this case, as expected, it didn't have anything to do with some weird IE behavior, but rather my own mistake in another part of the code. The if statement above checks for an id on an area of the canvas. My tweaked IE version of the mouseover event actually applied an id to the area. The mouseclick event found that id and went into the else condition instead of where I wanted it to go.

Apologies for wasting your time.

Glad you found the problem because I sure couldn't! :D

Nice looking app btw.