Sitebase / cssinjs

Sandbox for implementation examples and problems with Reacts inline CSS pattern
34 stars 4 forks source link

Event listener never removed #1

Open LinusU opened 9 years ago

LinusU commented 9 years ago

You are adding a bound function but then removing the original function, it won't work.

function hello() { console.log('Hello'); }

el.addEventListener('mousein', hello.bind(this));
el.removeEventListener('mousein', hello); // Nothing will be removed

https://github.com/Sitebase/cssinjs/blob/feature-interaction-mixin/interaction-aware-mixin.js

Sitebase commented 9 years ago

Thanks for the heads up @LinusU How can this be solved? Do I needs to store the bound version of the function or something?

LinusU commented 9 years ago

Yes, the same value that's being passed to addEventListener must be passed to removeEventListener.

If there is a function that will be called when the instance is created (haven't used mixins so I don't know) I would store the bound functions on the new instance. Then just use this.onOver and this.onOut directly.

constructor: function () {
  this.onOver = this.onOver.bind(this);
  this.onOut = this.onOut.bind(this);
}