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

时间:2015-09-28 19:25:55

标签: jquery meteor iron-router keyboard-events meteor-blaze

我的目标网页上有一个快速动画,供用户在进入我的网站时看到。动画完成后,用户将被路由到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页面并在整个站点中出现奇迹,如果他们要点击退出按钮或再次单击鼠标,它们将再次被重新路由回当前任务页面。

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

感谢任何帮助

1 个答案:

答案 0 :(得分: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事件的唯一事件处理程序。如果你有更多的事件处理程序,你可能想要单独声明这些事件处理程序函数并使用这些命名引用来取消绑定你想要处理的处理程序。