Raphaeljs和Internet Explorer，點擊元素時出現問題

Question

我在javascript中有下面一段代碼，當我點擊它時，它基本上隱藏或顯示一個Raphaeljs集。它在Google Chrome，FireFox和Safari中運行良好，但在Internet Explorer下完全沒有問題。

var paper = Raphael(document.getElementById('ADiv'), 450, 490); 

var group = paper.set(); 

var toxicRect = paper.rect(0, 0, 120, 60, 10); 
toxicRect.attr({"stroke-width": 1, 
      "stroke" : "#3083BE", 
      "fill" : "#D1DFE9"}); 

group.push(toxicRect); 

var toxicRectText = paper.text(60, 25, "Toxic in air\nthrough inhalation"); 
toxicRectText.attr({"font-size": 12 }); 
group.push(toxicRectText); 

var toxicToConcentrationPath = paper.path("M60 60L60 80") 
toxicToConcentrationPath.attr({"stroke-width": 1, 
        "stroke" : "#3083BE"}); 

group.push(toxicToConcentrationPath); 

var concentrationRect = paper.rect(0, 80, 120, 60, 10); 
concentrationRect.attr({"stroke-width": 1, 
        "stroke" : "#3083BE", 
       "fill" : "#D1DFE9"}); 

group.push(concentrationRect); 

var conRectText = paper.text(60, 105, "Is concentration\n> TLV/TWA"); 
conRectText.attr({"font-size": 12}); 
group.push(conRectText); 

var conRectTextYes = paper.text(50, 135, "Yes/"); 

conRectTextYes.attr({"font-size": 12, 
       "font-style": "italic"}); 

group.push(conRectTextYes); 

var conRectTextNo = paper.text(75, 135, "No"); 
conRectTextNo.attr({"font-size": 12, 
       "font-style": "italic"}); 

group.push(conRectTextNo); 

var monitorConcentrationGroup = paper.set(); 

var monitorConcentrationRect = paper.rect(140, 95, 60, 30, 10); 
monitorConcentrationRect.attr({"stroke-width": 1, 
         "stroke" : "#3083BE", 
        "fill" : "#D1DFE9"}); 

monitorConcentrationGroup.push(monitorConcentrationRect); 

var monitorConcentrationRectText = paper.text(170, 115, "Monitor"); 
monitorConcentrationRectText.attr({"font-size": 12}); 

monitorConcentrationGroup.push(monitorConcentrationRectText); 

var concentrationToMonitorPath = paper.path("M120 110L140 110") 
concentrationToMonitorPath.attr({"stroke-width": 1, 
        "stroke" : "#3083BE"}); 

monitorConcentrationGroup.push(concentrationToMonitorPath); 
monitorConcentrationGroup.hide(); 


//Actions when clicking on decisions 
conRectTextYes.node.onclick = function() { 

     monitorConcentrationGroup.hide(); 
}; 

conRectTextNo.node.onclick = function() { 

     monitorConcentrationGroup.show(); 
}; 

任何人有什麼想法？您可以在http://raphaeljs.com/playground.html上進行測試，方法是剪切並粘貼並省略腳本的第一行。點擊「否」應該會出現一個框，至少在Chrome中，但不在IE中...

謝謝！

Answer 1

Raphael使用VML在IE8中渲染形狀，特別是在您的示例中的VML textpath元素。但是，IE8不會爲該元素觸發鼠標事件。您可以沿着節點樹向上並將事件處理程序附加到包含textpath的shape元素，但即使如此，活動區域也只由組成文本的像素組成，因此點擊非常困難。

一個更好的解決辦法是增加一個透明的矩形後面的文字，並附上您的事件處理程序，當好：（通過編輯：http://jsfiddle.net/brianpeiris/8CZ8G/）http://jsfiddle.net/brianpeiris/8CZ8G/show/：

... 

// Make the rectangle slightly larger and offset it 
// from the text coordinates so that it covers the text. 
var conRectTextNoContainer = paper.rect(75 - 8, 135 - 9, 17, 14); 
// Give the rectangle a fill (any color will do) and 
// set its opacity to and stroke-width to make it invisible 
conRectTextNoContainer.attr({ 
    fill: '#000000', 
    'fill-opacity': 0, 
    'stroke-width': 0 
}); 
group.push(conRectTextNoContainer); 

var conRectTextNo = paper.text(75, 135, "No"); 
conRectTextNo.attr({ 
    "font-size": 12, 
    "font-style": "italic" 
}); 
group.push(conRectTextNo); 

... 

var conRectTextNoNode = conRectTextNo.node; 
if (conRectTextNoNode.tagName === 'textpath') { 
    // We're in IE8, attach the handler to the parentNode 
    conRectTextNoNode = conRectTextNo.node.parentNode; 
} 
conRectTextNoContainer.node.onclick = (
    conRectTextNoNode.onclick = function() { 
    monitorConcentrationGroup.show(); 
    } 
); 

... 

工作演示

Answer 2

大致相似到另一個問題，我會發表相同的答案：

onmousedown在我工作的IE 7,8和9

  st[0].onclick = function() { 
       myFunc(dataObj); 
       st.toFront(); 
       R.safari(); 
      }; 
      st[0].onmousedown = function() { 
       myFunc(dataObj); 
       st.toFront(); 
       R.safari(); 
      }; 

我嘗試了一些其他方法，將函數抽象爲一個變量，但它沒有奏效。在我的情況下，我不能在顯示中添加一個矩形，並讓人們點擊這個矩形，這是一個糟糕的解決方案，原因有幾個。

希望這會有所幫助！