Eventos funciona no Firefox / Chrome mas falharem no IE
-
22-08-2019 - |
Pergunta
Eu apenas construiu um mapa SVG da Nova Zelândia para uso com o excelente biblioteca javascript Raphael , mas, infelizmente, têm deparei com o que eu só posso imaginar é um bug ou variação sintática no interpretador JavaScript do IE.
No Firefox e outros navegadores da onlick e onmouseover eventos funcionar perfeitamente - no entanto eles não incêndio no IE (testado no IE 7). Infelizmente não há nenhum erro de javascript para me ajudar a depurar isso, então eu só posso supor IE lida com esses eventos de alguma forma fundamentalmente diferente.
<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>
Muito obrigado:)
Solução
A correção parece estar usando o evento onmousedown vez de onclick.
A alteração:
rg[0].onclick = function() {
alert("IE never gets this far, but Firefox is happy.");
};
para
rg[0].onmousedown = function() {
alert("This works in IE and Firefox.");
};
resolveu o problema. Graças para a entrada de todos - chegou lá no final. Se alguém realmente sabe por que IE não gosta onclick , eu estaria interessado em ouvir!
Outras dicas
Você já tentou prender os eventos?
if (rg[0].attachEvent)
rg[0].attachEvent("onclick", function(){ /* IE */ });
else
rg[0].addEventListener("click", function(){ /* other */ }, false);
IE não é exatamente conhecido por trabalhar corretamente. Seria bom se você mencionou qual versão do IE você está usando.
Geralmente um quadro abstração, como jQuery ou protótipo é a sua melhor aposta. Eles lidam com as diferenças de navegador para você. Além disso, você pode se inscrever para os seus eventos em um nível superior ... é menos caro no navegador para subscrever a mousemove / clique, e determinar o que você está sobre, ou clique sobre a partir da bolha evento que para muitos objetos.
Joel Potter mencionou o modelo assinante, usando o dom e métodos do IE, que é melhor prática do que a atribuição método é.