Raphaeljs and Internet Explorer, problem when clicking an element

Question

I have the following piece of code in javascript that basically hide or show a Raphaeljs set when I click on it. It works perfectly well under Google Chrome, FireFox and Safari, but not at all under 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();
};

Anyone has any ideas? You can test it at http://raphaeljs.com/playground.html by making a cut and paste and omitting the first line of the script. Clicking the "No" should make a box appears, at least in Chrome, but not in IE...

Thank you!

Answer 1

Raphael uses VML to render shapes in IE8, specifically the VML textpath element in your example. However, IE8 does not fire mouse events for that element. You could go up the node tree and attach your event handler to the shape element that contains the textpath but, even then, the active-area only consists of the pixels that make up the text, so it's very difficult to click.

A better solution would be to add a transparent rectangle behind the text and attach your event handler to that as well:

...

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

...

Working Demo: http://jsfiddle.net/brianpeiris/8CZ8G/show/ (Editable via: http://jsfiddle.net/brianpeiris/8CZ8G/)

Answer 2

roughly similar to another question and I will post the same answer:

onmousedown worked for me in IE 7,8, and 9

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

I tried some other methods as well, abstracting the function to a variable but it didnt work. In my case I cannot add a rectangle to the display and have people click on this, it was a poor solution for several reasons.

Hope this helps!