javascript - Meteor JS: How should I bind events to the window in Meteor? - Stack Overflow

admin管理员组

文章数量:1410697

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

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

How should I bind events to the window in Meteor?

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

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

How should I bind events to the window in Meteor?

• javascript
• event-handling
• meteor
• mouseevent

Share Improve this question Follow asked Jan 31, 2014 at 17:46 ChanporyChanpory 3,09566 gold badges3939 silver badges4949 bronze badges 4

• By "outside the window", do you mean the user has pressed the mouse button inside the browser window, dragged outside the browser window, and then released the mouse button? – Sean Commented Jan 31, 2014 at 17:57
• Yes, exactly. I found this jQuery-based solution, and am trying to do it in the Meteor way, instead: stackoverflow./questions/5418740/… – Chanpory Commented Jan 31, 2014 at 19:08
• I'm pretty sure that meteor restricts template event handlers to the scope of the DOM defined in the template. You would probably need to define your event handler independent of a template, probably with jQuery as described at that link. Not sure there's a meteor way to do this. – Sean Commented Jan 31, 2014 at 20:06
• Came up with a solution that would work. Posted answer below. – Sean Commented Jan 31, 2014 at 20:56

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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.

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.

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.startup(function() {
  $(window).mouseup(function() {...});
});

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.

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.

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

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

本文标签： javascriptMeteor JS How should I bind events to the window in MeteorStack Overflow