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

I am trying to detect a mouseup outside of a window in Meteor. I tried this, but window doesn't seem to work:

我试图在Meteor窗口外检测一个鼠标。我试过这个，但窗口似乎不起作用：

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

How should I bind events to the window in Meteor?

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

4 个解决方案

#1

The code snippet below will bind the event handler when your template is created and unbind when your template is destroyed. Should give you the behavior you're looking for.

下面的代码片段将在创建模板时绑定事件处理程序，并在模板销毁时解除绑定。应该给你你正在寻找的行为。

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

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

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

Note that the event is bound in the onCreated handler, so there's a chance the template will not have been rendered yet when the event fires. If your handler interacts with the DOM, you will need to check for that. It is not bound in the onRendered handler because that would cause your mouseup handler to be bound multiple times if the template were re-rendered.

请注意，事件绑定在onCreated处理程序中，因此当事件触发时，模板可能还没有呈现。如果您的处理程序与DOM交互，则需要检查它。它没有绑定在onRendered处理程序中，因为如果重新呈现模板，那么会导致鼠标处理程序多次绑定。

Edit: As Serkan mentions below, the new UI engine only calls onRendered once when the template is inserted into the DOM. This makes it a better choice than onCreated if your event handler will interact with the DOM.

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

#2

This is not the typical Meteor use case, and Meteor doesn't provide any special helpers for such behavior (at least at this moment). So use typical jQuery solution for that. Just make sure that it's wrapped in Meteor.startup().

这不是典型的Meteor用例，并且Meteor没有为此类行为提供任何特殊帮助（至少在此刻）。所以使用典型的jQuery解决方案。只要确保它包含在Meteor.startup（）中。

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

#3

Meteor is almost 1.0 and will be shipping a new ui engine. According to the meteor wiki, the new engine already exposes document body for events.

流星几乎是1.0，并将发布一个新的ui引擎。根据流星维基，新引擎已经公开了文件正文。

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

These threads in the google group will help you pinpoint any current problem areas and suggestions on how to solve them.

谷歌小组中的这些主题将帮助您查明当前的任何问题区域以及如何解决这些问题的建议。

#4

You can use the onRendered and onDestroyed callbacks to register the helper.

您可以使用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);
});

#1