4

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?

Chanpory
  • 3,015
  • 6
  • 37
  • 49
  • 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 Jan 31 '14 at 17:57
  • Yes, exactly. I found this jQuery-based solution, and am trying to do it in the Meteor way, instead: http://stackoverflow.com/questions/5418740/jquery-mouseup-outside-window-possible – Chanpory Jan 31 '14 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 Jan 31 '14 at 20:06
  • Came up with a solution that would work. Posted answer below. – Sean Jan 31 '14 at 20:56

4 Answers4

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.

Sean
  • 4,365
  • 1
  • 27
  • 31
0

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() {...});
});
Hubert OG
  • 19,314
  • 7
  • 45
  • 73
0

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.

Serkan Durusoy
  • 5,447
  • 2
  • 20
  • 39
  • I'm on the shark branch of Meteor, and this worked on a freshly created default Meteor project, but it didn't work when I tried it in on my existing project. – Chanpory Feb 01 '14 at 04:29
  • Do you mean existing project with current or older Meteor version? Then it is normal that this does not work. This is a new API. But if you run meteor's shark branch against an existing codebase and it did not work, than you should perhaps try `meteor reset` first. In any case, `UI.body.events` is now the correct way of handling events on your window/body, and not any other hack. – Serkan Durusoy Feb 01 '14 at 21:17
  • I mean an existing project with the current shark branch of Meteor. I had some other problems with the shark branch, so I ended up downgrading to the `template-engine-preview-10.1` release. I'll try `meteor reset` and give it another shot. – Chanpory Feb 01 '14 at 21:23
  • There may also be a client side cache problem. You may want to try clearing up your app manifests if you have been using appcache. Or at least try Ctrl+Shift+Del your browser history just to make sure. – Serkan Durusoy Feb 01 '14 at 21:31
0

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);
});
corvid
  • 10,733
  • 11
  • 61
  • 130