Setting pointer-events:none with Raphael

Question

I'm using this:

circle.attr({
    fill:'#FFFFFF',
    'stroke-width':0,
    opacity:0,
    'pointer-events':'none'
});

The problem is mouse events are still caught and in the DOM inspector that property does not show.

Thanks.

Answer 1

Raphael has a whitelist of attributes it can assign to an element. Since pointer-events: none is not supported in VML then this property is not among the whitelist. To work around this you can do...

circle.node.setAttribute("pointer-events", "none");

Alternatively, if all circles are non-clickable you can include in your CSS stylesheet:

circle {
   pointer-events: none;
}

However, none of this will work in any browser that is IE8 or less. If you need old IE support please check out this answer: pointer-events: none VML raphael solution