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動畫後按鈕丟失點擊事件

回答

相關問題