Question

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

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

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

Answer 1

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

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更好的选择。

Answer 2

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

中

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

Answer 3

Meteor几乎是1.0，并将发布一个新的ui引擎。根据{{3}}，新引擎已经为事件公开了文档正文。

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

这些meteor wiki将帮助您查明当前的问题区域以及如何解决这些问题的建议。

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

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

4 个答案: