Clicking links on google-like map (IE7 problem)

[Tarzan]

Hi! I'm having a kind of strange problem. It only shows up in old IE (<=7) so if you hate browser backward compatibility, stop reading here.

In a game I'm working on, I've created a map that is draggable, very much like google maps.
On this map there are cities in A tag links. All with absolute positioning. If you click on a city, you get to the page of that city.
This works even with IE7, and here comes the strange part, ONLY if you havn't dragged the map before you click on a city. I.e. open the map page, click a city, and the link is followed, but open the map, drag it, and then click on a city link and nothing happens.

I suspect that it might have something to do with returning true to follow a link, and false if you don't want to. But that should affect other browsers too, shouldn't it?

I have a MouseDown function that checks if the mouse is clicked and then

function MouseDown(e)
{
        // .... event code ... //
        // If the clicked element is not a  city link , update a move. Else, the link will load.
        if(temp.tagName != 'A')
        {
            if (temp.tagName != "HTML"|"BODY" && temp.className != "dragclass")
            {
                temp = (typeof temp.parentNode != "undefined")?temp.parentNode:temp.parentElement;
            }
            if (temp.className == "dragclass")
            {
                // ... set dragging to true and check mouse position.
                document.onmousemove = MouseMove;
                return false;
            }
        }

I've even tried to explicitly returned true if you pressed a "A" tag but no luck.
The MouseMove then moves the map if dragging is true:

    if (!e) e = window.event;
    if (dragok)
    {    
    // newleft = Element left top before dragging + new mouse position - old mouse position
        var newleft = dx + e.clientX - x;
        var newtop = dy + e.clientY - y;
        d.style.left = newleft + "px";
        d.style.top  = newtop + "px";
        return false;
    }

and finally, the MouseUp sets dragging to false and unregister the mousemove function:

        dragok = false;
        document.onmousemove = null;
        // ... bunch of other code that sets variables according to where ithe mouse was released ... //

So to summarize, it works in firefox, new versions of IE and Chrome. Can it be something with the values returned? I've tried to return true, but it doesn't seem to do it. And the event itsn't attached to the A link anyway. Is there a way to have the A "block" the call? Well, it seems pretty intricate to me, but maybe it's easy.
I left a bunch of code out since I thought it would disturb more than help, but I can include it if you think the problem lies somewhere in there.

 

[VPmase]

Older IE's use a different var then FF, Chrome, and the newer IE's from what I've looked up.

Add this somewhere above your functions.

micro = Browser.indexOf("Microsoft");

Then change to

if (temp.className == "dragclass")
            {
                // ... set dragging to true and check mouse position.
                document.onmousemove = MouseMove;
                if(micro)
                                document.mousemove = MouseMoveIE;
                return false;
            }

MouseMoveIE will look like this:

    if (!e) e = window.event;
    if (dragok)
    {    
    // newleft = Element left top before dragging + new mouse position - old mouse position
        var newleft = dx + e.screenX - x;
        var newtop = dy + e.screenY- y;
        d.style.left = newleft + "px";
        d.style.top  = newtop + "px";
        return false;
    }

Of course you might have to work at the script to get it right since i haven't tested it.

 

[Tarzan]

So there is a difference on how to register the onmousemove?

What is the difference between the old MouseMove function and your MouseMoveIE? They look the same to me.

If it wasn't clear: the problem isn't that the map doesn't move in IE7, the problem is that IE7 won't follow the A links once the map has been dragged.

 

[VPmase]

IE ver:

 var newleft = dx + e.[b]screenX[/b] - x;
        var newtop = dy + e.[b]screenY[/b]- y;

Your ver:

 var newleft = dx + [b]e.clientX[/b] - x;
        var newtop = dy + [b]e.clientY[/b] - y;

IE uses e.screenX/Y
not e.clientX/Y

 

[essellar]

The drag action, though, is working properly -- except that it's getting "stuck" in the sense that the default action on links is preempted. It's probably something to do with the event propagation (bubbling) model. You might want to check this document at quirksmode to see if it answers any questions -- it starts to get pretty close to exactly on point about two-thirds of the way down.

 

[Tarzan]

I got it!
I had registered events on both mouse down and up:

document.onmousedown = mouseDown;
document.onmouseup = mouseUp;

When the mouse fires, I checked if I was over an A link and didn't do anything if I was. But I forgot about the onmouseup, which loaded the new map parts with AJAX. Apparently in IE it fired, before the link was visited, and returning false, it didn't follow the link.
I solved it by unregistering the mouseUp in the MouseDown function:

// First, a bunch of code to register event and starting dragging if we're on the drag area and didn't hit an A tag.

else // The user pressed an A tag
{
   document.onmouseup = null;
}