CODEWITHSUNDEEP
javascriptinternet-explorerraphael
Bayard Randel
Bayard Randel

Reputation: 10086

Events work in Firefox/Chrome but fail in IE

I've just built an SVG map of New Zealand for use with the excellent javascript library Raphael, but unfortunately have stumbled upon what I can only imagine is a bug or syntactic variation in IE's javascript interpreter.

In Firefox and other browsers the onlick and onmouseover events work perfectly - however they do not fire in IE (tested in IE 7). Unfortunately there is no javascript error to help me debug this, so I can only assume IE handles these events in some fundamentally different way.

<script type="text/javascript" charset="utf-8">
    window.onload = function() {
        var R = Raphael("paper", 450, 600);
        var attr = {
            fill: "#3f3f40",
            stroke: "#666",
            "stroke-width": 1,
            "stroke-linejoin": "round"
        };
        var nz = {};
        nz.northland = R.path(attr, "M 193.34222,3.7847503 C 194.65463");
                // SVG data stripped for sake of brevity
        var current = null;
        for (var region in nz) {
            nz[region].color = Raphael.getColor();
            (function(rg, region) {
                rg[0].style.cursor = "pointer";
                rg[0].onmouseover = function() {
                    current && nz[current].animate({ fill: "#3f3f40", stroke: "#666" }, 500) && (document.getElementById(current).style.display = "");
                    rg.animate({ fill: rg.color, stroke: "#ccc" }, 500);
                    rg.toFront();
                    R.safari();
                    document.getElementById(region).style.display = "block";
                    current = region;
                };
                rg[0].onclick = function() {
                    alert("IE never gets this far.");
                    //window.location.href = "my-page.aspx?District=" + region;
                };
                rg[0].onmouseout = function() {
                    rg.animate({ fill: "#3f3f40", stroke: "#666" }, 500);
                };
                if (region == "northland") {
                    rg[0].onmouseover();
                }
            })(nz[region], region);
        }
    };
</script>

Many thanks :)

Upvotes: 1

Views: 2681

Answers (4)

Tracker1
Tracker1

Reputation: 19334

Generally an abstraction framework, like jquery or prototype is your best bet. They handle the browser differences for you. Also, you can subscribe to your events at a higher level... it's less expensive in the browser to subscribe to the mousemove/click, and determine what you're over, or clicking on from the event bubble than to many objects.

Joel Potter mentioned the subscriber model, using the dom and IE methods, which is better practice than the method assignment is.

Upvotes: 0

Joel
Joel

Reputation: 19358

Have you tried attaching the events?

if (rg[0].attachEvent)
    rg[0].attachEvent("onclick", function(){ /* IE */ });
else
    rg[0].addEventListener("click", function(){ /* other */ }, false);

Upvotes: 1

Bayard Randel
Bayard Randel

Reputation: 10086

The fix appears to be using the onmousedown event instead of onclick.

Changing:

rg[0].onclick = function() {
alert("IE never gets this far, but Firefox is happy.");
};

to 

rg[0].onmousedown = function() {
alert("This works in IE and Firefox.");
};

resolved the issue. Thanks for everyone's input - got there in the end. If anyone actually knows why IE doesn't like onclick, I'd be interested to hear!

Upvotes: 3

Zifre
Zifre

Reputation: 26998

IE is not exactly known for working correctly. It would help if you mentioned which IE version you are using.

Upvotes: 0

Related Questions