事件在 Firefox/Chrome 中有效，但在 IE 中失败答案

【问题标题】：Events work in Firefox/Chrome but fail in IE事件在 Firefox/Chrome 中有效，但在 IE 中失败
【发布时间】：2009-03-29 20:03:52
【问题描述】：

我刚刚构建了一张新西兰的 SVG 地图，用于与优秀的 javascript 库 Raphael 一起使用，但不幸的是，我偶然发现了我只能想象的 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>

非常感谢:)

【问题讨论】：

标签： javascript internet-explorer raphael

【解决方案1】：

修复似乎是使用 onmousedown 事件而不是 onclick。

变化：

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，我很想听听！

【讨论】：

你可以通过简单地采用一个已经为你解决跨浏览器问题的框架来避免很多这样的问题，比如jQuery、dojo、mootools或者prototype/scriptaculous。
好建议 - 显然是改进我的 jquery-fu 的好时机。谢谢:)
这是一个更具体的案例：您正在查看对 SVG 元素的事件支持。这与标准 HTML 元素上的跨浏览器事件支持不同。可能是（我尚未验证）IE 不支持 SVG 元素上的 mousedown 和 mouseup 事件。

【解决方案2】：

您是否尝试过附加事件？

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

【讨论】：

我喜欢这更符合 W3C 的建议，但不幸的是，同样的问题仍然存在。但是，以下确实有效： if (rg[0].attachEvent)rg[0].attachEvent("onmousedown", function() { /* IE */ });
自从我在 javascript 中使用本机事件句柄已经有一段时间了。像 JQuery 这样的库让我被宠坏了。 ;)

【解决方案3】：

IE 并不完全以正常工作着称。如果您提及您使用的是哪个 IE 版本，将会有所帮助。

【讨论】：

【解决方案4】：

一般来说，一个抽象框架，如 jquery 或原型是你最好的选择。他们为您处理浏览器差异。此外，您可以订阅更高级别的事件...在浏览器中订阅 mousemove/click 并确定您结束的内容，或从事件气泡中单击比许多对象更便宜。

Joel Potter 提到了订阅者模型，使用 dom 和 IE 方法，这比方法赋值更好。

【讨论】：