Remain in mouseover-state after click on svg-rect (no hover, no css)

Question

I execute some functions when a certain element got a mouse over. I execute some other functions (that basically revert the previously executed functions, as I can't find a way to just "rewind" it like I could possibly do with css and hover) on mouseout.

Now I want to stay in the "mouseover" state when I clicked the element, and only trigger other mouseover or mouseout events if the same element is clicked again.

Can't find a way to do this :( googled around and found words about making the element "active" or setting "focus" property, but I think that's only possible for css-able elements or so, don't know. Tried it but failed.

The elements to attach the listeners to are some svg.js rectangles. I selected them through

let elements = this.$svg.select('rect').members;

then I iterate over them, using a forEach loop (tried it with event propagation previously, but those constantly firing mouseover and mouseout events were really messing up my browsers performance - click is ok.)

elements.forEach(function (element) { .... }

I tried creating a variable "rectClicked" (initialized with "none"), that stores the id of the clicked element, and comparing if a following click points to the same element again - if yes, set it to "none" again. Like this

                    element.click(function (event) {
                        console.log("rect clicked");
                            if(this.rectClicked === "none"){
                                this.rectClicked = attributeName;
                            }

                            else if (this.rectClicked === attributeName){
                                this.rectClicked = "none"
                            }
                    }.bind(this));

My thoughts were that I could look for the attributeName (should be the currently mouseovered or mouseouted element) and if it matches with the last clicked rect, don't execute the functions.

This doesn't really work and seems dirty to me. Also tried things with "element.on" and "element.off" to set and remove listeners (https://svgjs.dev/docs/2.7/events/), but I can't access element.off inside an eventlistener function, only got access to the event itself.

Also strange things are happening, like one click on a element fires 3 clicked-events (if the list of elements contains 3 elements), so it always executes each event listener function for each element - I think that's why I can't compare the rectClicked with the attributeName, as after the forEach loop is executed, it will always match at some point. But I need those listeners on all rect elements, so a loop seems necessary. :/

Would really appreciate any help! Thanks in advance!

If it matters, the other listeners look like this:

                    element.mouseover(function () {
                            this.someFunction()
                         
                    }.bind(this));

                  
                    element.mouseout(function () {
                         this.reverEverthingThatHappendThroughSomeFunction();
            
                    }.bind(this));