jQuery动画后按钮丢失点击事件

我有一个问题，只有当我点击按钮上的快速，我认为它必须做一些动画，但我不知道。jQuery动画后按钮丢失点击事件

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

在页面上有一个汉堡菜单按钮。该按钮负责启动滑动菜单。

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

某处在DOM树也有滑出菜单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'); 
      }); 
     }); 
    } 
});

发生的问题是汉堡包菜单不再触发点击事件。如果我在中间暂停点击菜单，它会一直工作。一旦我开始快速点击（快速滑出），汉堡菜单就不会再触发事件了。有趣的是，它始终是菜单按钮的开始，所以这意味着当覆盖层可见并且菜单不存在时。

来源

2017-03-28 Rob

我遇到过这个问题之前，我发现工作的解决方案是在.animate（）前面使用.stop（）。

看到这个页面：http://api.jquery.com/stop/

这将从堆积事件和越来越大清洗了停止动画队列。

来源

2017-03-28 21:32:27 Koriley

恐怕这是行不通的。由于DOM不会改变动态，所以它让我感到害怕。叠加以及幻灯片菜单位于开始的DOm树中。为了以防万一，我还订阅了点击文件，但这对我来说是个谜。我甚至摆脱了动画，只是用$ .css来演奏，而我得到了相同的结果。多次快速点击后，我没有得到任何回应。调试器不会触发事件。 – Rob

jQuery动画后按钮丢失点击事件

回答

相关问题