이벤트가 Firefox/Chrome에서는 작동하지만 IE에서는 실패합니다.

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

문제

저는 방금 뛰어난 자바스크립트 라이브러리와 함께 사용할 뉴질랜드의 SVG 지도를 만들었습니다. 라파엘, 그러나 불행히도 IE 자바스크립트 인터프리터의 버그나 구문 변형이라고만 상상할 수 있는 것을 우연히 발견했습니다.

Firefox 및 기타 브라우저에서는 onlick 및 onmouseover 이벤트가 완벽하게 작동하지만 IE에서는 실행되지 않습니다(IE 7에서 테스트됨).불행하게도 이 문제를 디버깅하는 데 도움이 되는 자바스크립트 오류가 없으므로 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>

정말 감사합니다 :)

도움이 되었습니까?

해결책

수정 사항은 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/Click을 구독하는 것이 저렴합니다. 그리고 당신이 끝나는 것을 결정하거나, 이벤트 버블에서 많은 객체보다 클릭하는지 결정하십시오.

Joel Potter는 DOM 및 IE 메소드를 사용하여 가입자 모델을 언급했는데, 이는 방법 할당보다 더 나은 실습입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top