Ignore hover event completely for text on Raphael object

Question

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");

Yeah, it'd go in the CSS for the object, I'm not sure if it's different in Raphael — Zach Saucier, Jul 24 '13 at 12:21
Looks like you could do `papaer.node.setAttribute("pointer-events","none");` — Zach Saucier, Jul 24 '13 at 12:24
That did it my friend... thanks! paper.text(x, y, "?").node.setAttribute("pointer-events", "none"); - Add it as an answer so I can mark it.. — Louis van Tonder, Jul 24 '13 at 12:52

score 4 · Accepted Answer · edited May 23 '17 at 11:43

4

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

edited May 23 '17 at 11:43

Community

1
1

answered Jul 24 '13 at 12:54

Zach Saucier

24,871
12
85
147

Ignore hover event completely for text on Raphael object

1 Answers1