启动后删除事件侦听器

Question

我有以下HTML

    <button id="btn" type="button">Click Me!</button>
    <div id="outside">
     <div id='inside" class="animated">
      </div>
    </div>

当我单击按钮时，我首先显示 outside，然后设置 inside 的动画。效果很好。

当我再次点击时，我首先将 inside 动画化，然后隐藏 outside。为此，我将事件侦听器添加到 inside div，以侦听 animationend。它第一次工作正常。但是，我第二次尝试隐藏 outside 时，侦听器被启动并且无法正常工作。现在，我试图在第一次启动后立即删除事件侦听器，但我无法使其工作。

这是我最后一次尝试。

...
hideOutside: =>
  @inside.addEventListener 'animationend', @handler(event), no

handler: (e) =>
 @sheet.removeEventListener @animationEvent, @handler(event), no
 @outside.classList.remove('is-active')

我有 seen sample on SO similar to mine 但我不明白我的问题是什么。

谢谢（请不要删除它）。

Answer 1

这个：

@inside.addEventListener 'animationend', @handler(event), no
# ---------------------------------------^^^^^^^^^^^^^^^

并不像您认为的那样。这实际上是在调用 @handler，而不是传递对它的引用，所以它等同于说：

x = @handler(event)
@inside.addEventListener 'animationend', x, no

所以 @handler(event) 在 addEventListener 之前被调用。

您想使用函数 reference 所以：

@inside.addEventListener 'animationend', @handler, no

和：

@sheet.removeEventListener @animationEvent, @handler, no

启动后删除事件侦听器

removing event listener after firing it up

javascript

coffeescript