[SOLVED] Ignore hover event completely for text on Raphael object

Ignore hover event completely for text on Raphael object

I am binding hover events to Raphael circles. This all works well and as expected.

When drawing a text string "over" the circle, using Raphael, the text character "steals" the hover and the circle hover exits. When exiting the text character, into the circle, the hover is restored.

The text is obviously a new, different object. Can I disable hover events completely for this text object?

I cannot draw the text behind the circle, as the circle has a solid color.
I am not specifically binding any hover events to the text object

Are there ways to solve this?

var paper = Raphael("myMap", 721, 1017);
paper.clear();

newcircle.attr({ fill: "#727272", "cursor": "pointer", stroke: "#A4A2A2"});
paper.text(x, y, "X");

Solution

Try adding pointer-events:none; for the object.

For you that'd look something like paper.node.setAttribute("pointer-events","none");

From comments: Actual fix: paper.text(x, y, "?").node.setAttribute("pointer-events", "none");

Edit For IE, the solution is more complex. You either have to use javascript like this or a plugin like this one. I got this answer from this SO post