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。

您希望使用参考功能，所以：

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

和

@sheet.removeEventListener @animationEvent, @handler, no

启动后删除事件监听器

1 个答案: