Question

Do Raphael sets accept event handler? When I set an event handler on a raphael set, it seems that it is instead assigned on each of the Raphael shapes inside the set and not on the set itself as you can see here if you try to click the set:

http://jsbin.com/aponen/3/edit

I’m not interested in various hacks such as chaining elements inside a set with the set itself via custom attributes or similar approaches.

Thanks

Answer 1

Yes, the event handler is applied to each object individually — Raphael does not make use of the <g> element of SVG. However, you can fix your issue here with a few keystrokes:

set.push(rect);
set.push(circle);
set.attr({'fill': 'yellow'});
set.click(function(evt) {
    //old
    this.attr({'fill': 'red'});
    //new
    set.attr({'fill': 'red'});
});

The biggest difference in the way it works and the way you thought it might work is the meaning of “this” inside the handler. Changing it to “set” will fix that right up.

UPDATE, Jan. 26, 2013
Per comments, you could also attach the set to the children of the set with one line, using Raphael’s “data” method:

set.push(rect);
set.push(circle);

set.data('myset', set);

set.attr({'fill': 'yellow'});
set.click(function(evt) {
  this.data('myset').attr({'fill': 'red'});
});

I don’t believe there is a native way to access the set from children, but I could be missing it.