Ereignisse arbeiten in Firefox/Chrome, aber scheitern in IE

Question

Ich habe gerade eine SVG-Karte von Neuseeland für die Verwendung mit der ausgezeichneten Javascript-Bibliothek Raphael gebaut, aber leider sind gestolpert, was ich nur vorstellen kann, ist ein Bug oder syntaktische Variation in Der Javascript-Interpreter von IE.

In Firefox und anderen Browsern funktionieren die onlick und onmouseover Ereignisse perfekt - aber sie feuern nicht in IE (getestet in IE 7). Leider gibt es keinen JavaScript-Fehler, der mir hilft, dies zu debuggen. Daher kann ich nur annehmen, dass der IE diese Ereignisse auf eine grundlegend andere Weise behandelt.

<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> 

Vielen Dank :)

Answer 1

Das Update scheint das onmousedown-Ereignis anstelle onclick zu verwenden.

ändern:

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

zu

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

das Problem gelöst. Vielen Dank für die Beiträge aller - am Ende angekommen. Wenn jemand wirklich weiß, warum IE onclick nicht mag, würde mich interessieren, zu hören!

Answer 2

Haben Sie versucht, die Ereignisse Befestigung?

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

Answer 3

IE ist nicht genau bekannt für die korrekte Funktionsweise. Es würde helfen, wenn Sie erwähnen, welche IE-Version Sie verwenden.

Answer 4

Generell ist ein Abstraktionsrahmen wie jQuery oder Prototyp die beste Wahl. Sie behandeln die Browserunterschiede für Sie. Außerdem können Sie Ihre Veranstaltungen auf einer höheren Ebene abonnieren ... Im Browser ist es weniger kostspielig, den Mauszeiger zu aktivieren/klicken und zu bestimmen, was Sie vorhaben, oder auf die Ereignisblase zu klicken, anstatt auf viele Objekte.

Joel Potter erwähnte das Subskribentenmodell unter Verwendung der dom- und IE-Methoden, was eine bessere Praxis als die Methodenzuweisung ist.