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

Примерно похож на другой вопрос и я выложу такой же ответ:

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();
            };

Я пробовал и другие методы, абстрагируя функцию от переменной, но она не работала. В моем случае я не могу добавить прямоугольник на дисплей и заставлять людей нажимать на него, это было плохое решение по нескольким причинам.

Надеюсь это поможет!

Answer 2

Рафаэль использует VML для визуализации фигур в IE8, в частности, VML textpath элемент в вашем примере. Однако IE8 не запускает события мыши для этого элемента. Вы можете перейти вверх по дереву узлов и прикрепить свой обработчик событий к shape элемент, который содержит textpath но даже тогда активная область состоит только из пикселей, составляющих текст, поэтому щелкать по ней очень сложно.

Лучшим решением было бы добавить прозрачный прямоугольник за текстом и добавить к нему обработчик событий:

...

// 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();
  }
);

...

Рабочая демонстрация: http://jsfiddle.net/brianpeiris/8CZ8G/show/ (редактируется через: http://jsfiddle.net/brianpeiris/8CZ8G/)