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不会为该元素触发鼠标事件。您可以上移节点树并将事件处理程序附加到包含shape的{{1}}元素，但即使这样，活动区域也只包含组成文本的像素，因此它是很难点击。

更好的解决方案是在文本后面添加一个透明矩形，并将事件处理程序附加到该文本：

textpath

工作演示：http://jsfiddle.net/brianpeiris/8CZ8G/show/（可编辑通过：http://jsfiddle.net/brianpeiris/8CZ8G/）

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

我也尝试了其他一些方法，将函数抽象为变量，但它没有用。在我的情况下，我不能在显示器上添加一个矩形，让人们点击它，由于几个原因，这是一个糟糕的解决方案。

希望这有帮助！

Raphaeljs和Internet Explorer，单击元素时出现问题

2 个答案: