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

但是，一旦用户被路由到当前任务页面并想知道整个站点，如果他们再次点击退出按钮或单击鼠标，他们将再次被重新路由回当前任务页面。

我看过其他方法，但似乎无法弄清楚这种方法有什么问题。

感谢任何帮助

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 事件的唯一事件处理程序。如果您有更多的事件处理程序，您可能希望单独声明这些事件处理程序函数并使用这些命名引用来取消绑定您想要处理的处理程序。

DOM 事件在其他模板页面上重复

DOM event repeates on other template pages

jquery

meteor

iron-router

keyboard-events

meteor-blaze