在其他模板頁面上重複出現DOM事件

Question

我在用戶在進入我的網站時看到的着陸頁上有一個快速動畫。一旦動畫完成，用戶將被路由到currentTasks頁面，在那裏他們開始與網站進行交互。

我想爲已經看過它的用戶在動畫過程中添加一個跳過功能。我已經添加了以下jQuery的事件，讓人們通過按Esc鍵或單擊鼠標跳過過渡

// If the user hit the escape button, navigate them to the currentTasks page 
    $(document).keyup(function(event) { 
     event.preventDefault(); 
     if (event.keyCode == 27) { // escape key maps to keycode `27` 
      Router.go('/currentTasks'); 
     } 
    }); 
    $(document).mousedown(function(event){ 
     event.preventDefault(); 
     Router.go('/currentTasks'); 
    }); 

然而，一旦用戶被路由到currentTasks頁面奇事整個網站，如果他們打退出按鈕或再次單擊鼠標，它們將再次被重新路由回當前任務頁面。

我看過其他方法，似乎無法弄清楚這種方法有什麼問題。

感謝所有幫助

Answer 1

您需要解除綁定的事件處理程序發生後一個。我還更新了代碼以使用首選的「on」方法來附加事件處理程序。

// If the user hit the escape button, navigate them to the currentTasks page 
    $(document).on('keyup', function(event) { 
     event.preventDefault(); 
     if (event.keyCode == 27) { // escape key maps to keycode27 
      $(document).off('keyup mouseup'); 
      Router.go('/currentTasks'); 
     } 
    }); 
    $(document).on('mouseup', function(event){ 
     event.preventDefault(); 
     $(document).off('keyup mouseup'); 
     Router.go('/currentTasks'); 
    }); 

我應該注意 - 這是假設這些都是您有連接到鼠標鬆開和KeyUp事件唯一的事件處理程序。如果您有更多的事件處理程序，則可能需要單獨聲明這些事件處理程序函數，並使用這些命名的引用來解除要處理的處理程序的綁定。