Rafael JS: how to delete 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 the item, I want it to stop highlighting.

In the Raphael documentation, I found:

To disable events, use the same method names with the prefix "un", that is, element.unclick (f);

but I can't get this to work, and I also don't understand the "f" parameter.

It does not work, but what does it do?

obj.click( function() { this.unmouseover(); }); 

Answer 1

Ok, you need to 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/

This is what f about. You can also use unhover() :

 circle.click(function (event) { this.attr({fill: "blue"}); this.unhover(mouseover, mouseout); }); 

http://jsfiddle.net/GexHj/2/