I have the following HTML
<button id="btn" type="button">Click Me!</button>
<div id="outside">
<div id='inside" class="animated">
</div>
</div>
outside
inside
inside
outside
inside
animationend
outside
...
hideOutside: =>
@inside.addEventListener 'animationend', @handler(event), no
handler: (e) =>
@sheet.removeEventListener @animationEvent, @handler(event), no
@outside.classList.remove('is-active')
This:
@inside.addEventListener 'animationend', @handler(event), no
# ---------------------------------------^^^^^^^^^^^^^^^
doesn't do what you think it does. That's actually calling @handler
, not passing a reference to it so it is the same as saying:
x = @handler(event)
@inside.addEventListener 'animationend', x, no
so @handler(event)
is being called before addEventListener
.
You want to work with the function reference so:
@inside.addEventListener 'animationend', @handler, no
and:
@sheet.removeEventListener @animationEvent, @handler, no