Firefox/Chromeで動作しているのにIEで失敗する

Question

優れたjavascriptライブラリRaphaelと一緒に使用するために、ニュージーランドのSVGマップを作成しましたが、不幸にもバグや構文上の違いがあると思いますIEのjavascriptインタープリタ。

Firefoxや他のブラウザでは、onlickイベントとonmouseoverイベントは完全に機能しますが、IEでは起動しません（IE 7でテスト済み）。残念ながら、これをデバッグするのに役立つjavascriptエラーはないので、私はIEがこれらのイベントを根本的に異なる方法で処理すると仮定することができます。

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

多くの感謝:)

Answer 1

修正プログラムは、onclickの代わりにonmousedownイベントを使用しているようです。

変更：

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

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

には、問題を解決しました。皆さんのご意見ありがとうございます。誰でも実際にIEが onclickが好きでない理由を知っていれば、私は聞いてみたいと思うだろう！

Answer 2

は、あなたがイベントを装着しようとしたことがありますか？

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

Answer 3

IEが正しく動作することは正確にはわかりません。あなたが使用しているIEバージョンについて言及しておけば助けになります。

Answer 4

一般に、jqueryやプロトタイプのような抽象化フレームワークが最適です。彼らはあなたのブラウザの違いを処理します。また、より高いレベルであなたのイベントに登録することもできます...ブラウザでmousemove/clickを購読し、何が終わったのかを判断したり、多くのオブジェクトよりもイベントバブルからクリックする方が安上がりです。

Joel Potterは、domおよびIEメソッドを使用してサブスクライバモデルを説明しました。これはメソッド割り当てよりも優れています。