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');
    });

我应该注意 - 这是假设这些是您附加到 mouseup 和 keyup 事件的唯一事件处理程序。如果您有更多事件处理程序，您可能希望单独声明这些事件处理程序函数并使用这些命名引用来取消绑定您要处理的处理程序。