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 Saf

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/)