Raphael JS : how to remove events? - events

Question

I use the Raphael .mouseover() and .mouseout() events to highlight some elements in my SVG.
This works fine, but after I click on an element, I want it to stop highlighting.
In the Raphael documentation I found :
To unbind events use the same method names with “un” prefix, i.e. element.unclick(f);
but I can't get this to work and I also don't understand the 'f' parameter.
This doesn't work , but what does??
obj.click( function() {
this.unmouseover();
});

Answer 1

Ok, what you have to do is pass the handler function to the unmouseover request:
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");
var mouseover = function (event) {
this.attr({fill: "yellow"});
}
var mouseout = function (event) {
this.attr({fill: "red"});
}
circle.hover(mouseover, mouseout);
circle.click(function (event) {
this.attr({fill: "blue"});
this.unmouseover(mouseover);
this.unmouseout(mouseout);
});
http://jsfiddle.net/GexHj/1/
That's what f is about. You can also use unhover():
circle.click(function (event) {
this.attr({fill: "blue"});
this.unhover(mouseover, mouseout);
});
http://jsfiddle.net/GexHj/2/