События работают в Firefox/Chrome, но не работают в IE

Question

Я только что построил 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> 

Большое спасибо :)

Answer 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, мне было бы интересно услышать!

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 или prototype, является вашим лучшим выбором. Они обрабатывают различия браузера для вас. Кроме того, вы можете подписаться на свои мероприятия на более высоком уровне ... в браузере менее дорого, чтобы подписаться на mousemove/click, и определить, что вы закончили, или щелкнуть мышью от пузыря события, чем на многие объекты.

Joel Potter упомянул модель абонента, используя методы dom и IE, что лучше, чем назначение метода.