jQuery动画之后的按钮丢失单击事件

Question

我有一个问题，只有当我点击快速按钮时才会发生，我认为它必须与动画有关，但我不确定。

这是滑出的侧边菜单的DOM。

页面上有一个汉堡包菜单按钮。此按钮负责启动幻灯片菜单。

<a class="btn-hamburger btn-ripple btn-menu" href="#">
    <i class="material-icons">menu</i>
</a>

在DOM树的某个地方，也有slide out menu defained，在该菜单中，我们可以看到，我们有与开始按钮几乎相同的按钮。

<div class="side-menu-overlay hidden">
    <div class="side-menu">
        <div class="side-menu-header">
            <a class="btn-hamburger btn-ripple btn-menu" href="#">
                <i class="material-icons">menu</i>
            </a>
        </div>
    </div>
</div>

这是我的jQuery，它做动画。正如您从上面的DOM中所看到的，对于开始处的菜单按钮和滑出菜单中的菜单按钮，都会触发此事件。按钮是滑出还是滑入取决于应用于托管滑出菜单的覆盖的“隐藏”类。

$(document).on('click', '.btn-menu', function (e) {
    if (sideMenuOverlay.hasClass('hidden')) {
        sideMenuOverlay.removeClass('hidden');
        sideMenuOverlay.animate({
            opacity: 1
        }, 200, function () {
            sideMenu.animate({
                 marginLeft: 0
            }, 250);
        });
    }
    else {
        sideMenu.animate({
            marginLeft: -240
        }, 200, function () {
            sideMenuOverlay.animate({
                opacity: 0
            }, 300, function () {
                sideMenuOverlay.addClass('hidden');
            });
        });
    }
});

出现的问题是汉堡包菜单不再触发单击事件。如果我在中间暂停的情况下缓慢地单击菜单，它将一直工作。一旦我开始点击快速(快速滑出和快速滑入)，汉堡菜单将不再触发事件。有趣的是，它总是在开始时的菜单按钮，所以这意味着当覆盖是可见的和菜单是不是。

Answer 1

我以前遇到过很多这个问题，我发现有效的解决方案是在.animate()前面使用.stop()。

查看此页面：http://api.jquery.com/stop/

这将阻止动画队列堆叠事件并清除事件。