Meteor JS：我应该如何将事件绑定到 Meteor 中的窗口？答案

【问题标题】：Meteor JS: How should I bind events to the window in Meteor?Meteor JS：我应该如何将事件绑定到 Meteor 中的窗口？
【发布时间】：2014-01-31 17:46:31
【问题描述】：

我正在尝试在 Meteor 的窗口外检测 mouseup。我试过这个，但window 似乎不起作用：

Template.layout.events({
  'mouseup window' : function(e) {
    console.log("mouseup");
  }
});

我应该如何将事件绑定到 Meteor 中的窗口？

【问题讨论】：

“窗口外”是指用户在浏览器窗口内按下鼠标按钮，拖到浏览器窗口外，然后松开鼠标按钮？
是的，完全正确。我找到了这个基于 jQuery 的解决方案，并试图以 Meteor 的方式来做，而不是：stackoverflow.com/questions/5418740/…
我很确定meteor 将模板事件处理程序限制在模板中定义的DOM 范围内。您可能需要定义独立于模板的事件处理程序，可能使用该链接中描述的 jQuery。不确定是否有流星方法可以做到这一点。
想出了一个可行的解决方案。在下面发布答案。
太棒了，它奏效了。谢谢！

标签： javascript event-handling meteor mouseevent

【解决方案1】：

下面的代码 sn-p 将在创建模板时绑定事件处理程序，并在销毁模板时取消绑定。应该给你你正在寻找的行为。

var layoutMouseUpHandler = function(e) {
    console.log('window.mouseup');
};

Template.layout.onCreated(function() {
    $(window).on('mouseup', layoutMouseUpHandler);
});

Template.layout.onDestroyed(function() {
    $(window).off('mouseup', layoutMouseUpHandler);
});

请注意，该事件绑定在 onCreated 处理程序中，因此当事件触发时模板可能尚未呈现。如果您的处理程序与 DOM 交互，您将需要检查它。它未绑定在 onRendered 处理程序中，因为如果重新渲染模板，这将导致您的 mouseup 处理程序被绑定多次。

编辑：正如 Serkan 下面提到的，新的 UI 引擎仅在模板插入 DOM 时调用一次onRendered。如果您的事件处理程序将与 DOM 交互，这使它成为比 onCreated 更好的选择。

【讨论】：

在新的 UI 引擎上，rendered 只被调用一次，并且当它在 DOM 上确实可用时。

【解决方案2】：

这不是典型的 Meteor 用例，而且 Meteor 没有为这种行为提供任何特殊的帮助程序（至少目前是这样）。所以使用典型的 jQuery 解决方案。只需确保它包含在 Meteor.startup() 中即可。

Meteor.startup(function() {
  $(window).mouseup(function() {...});
});

【讨论】：

【解决方案3】：

Meteor 即将发布 1.0，并将发布新的 ui 引擎。根据meteor wiki，新引擎已经公开了事件的文档正文。

UI.body.events({
  'mouseup': function () {
    console.log("mouseup");
  }
});

这些threads in the google group 将帮助您查明任何当前的问题领域以及如何解决这些问题的建议。

【讨论】：

我在 Meteor 的鲨鱼分支上，这适用于一个新创建的默认 Meteor 项目，但是当我在现有项目中尝试它时它不起作用。
您的意思是现有项目的当前或旧版本 Meteor 吗？那么这不起作用是正常的。这是一个新的 API。但是，如果您针对现有代码库运行流星的鲨鱼分支并且它不起作用，那么您可能应该首先尝试meteor reset。无论如何，UI.body.events 现在是处理窗口/主体事件的正确方法，而不是任何其他 hack。
我的意思是一个现有的项目，其中包含 Meteor 当前的鲨鱼分支。我在 Shark 分支上遇到了一些其他问题，所以我最终降级到了 template-engine-preview-10.1 版本。我会试试meteor reset 再试一次。
也可能是客户端缓存问题。如果您一直在使用 appcache，您可能想尝试清理您的应用清单。或者至少尝试 Ctrl+Shift+Del 你的浏览器历史记录以确保。

【解决方案4】：

您可以使用onRendered 和onDestroyed 回调来注册帮助程序。

var mouseEvent = function (e) {
  console.log(e.clientX, e.clientY);
}

Templates.myTemplate.onRendered(function () {
  $(window).on('mousemove', mouseEvent);
});

Template.myTemplate.onDestroyed(function () {
  $(window).off('mousemove', mouseEvent);
});

【讨论】：