イベントは、Firefox / Chromeで動作しますが、IEで失敗します

StackOverflow https://stackoverflow.com/questions/695265

質問

私は、優れたJavaScriptライブラリラファエルするで使用するためのニュージーランドの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>

多くの感謝：）

役に立ちましたか？

解決

修正は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 を、私は聞いて興味があると思います！

他のヒント

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

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

IEは正確に正しく動作するために知られていません。あなたが使用しているIEのバージョンを述べた場合、それは役立つだろう。

一般jQueryのかプロトタイプのような抽象化フレームワークは、あなたの最善の策です。彼らはあなたのために、ブラウザの違いを処理します。また、あなたはそれがクリック/のMouseMoveを購読すると、あなたがオーバーしているかを決定するために、ブラウザに安価だ、または多くのオブジェクトよりもイベントバブルからクリック...より高いレベルであなたのイベントを購読することができます。

ジョエル・ポッター方法割り当てがあるよりも優れ的であるDOMとIEの方法を使用して、加入者モデルを述べています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top