Raphaeljs и Internet Explorer, проблема при нажатии на элемент - PullRequest
Новая
       50

Raphaeljs и Internet Explorer, проблема при нажатии на элемент

2 голосов
/ 03 мая 2011

У меня есть следующий фрагмент кода в 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 ...

Спасибо!

Ответы [ 2 ]

3 голосов
/ 06 сентября 2012

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

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

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

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

3 голосов
/ 05 мая 2011

Рафаэль использует 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/)

...