CODEWITHSUNDEEP
javascriptjquerymeteor
FullStack
FullStack

Reputation: 6020

How to detect events on entire document in Meteor JS?

It's really as simple as that. I currently have in my template events, but it is not working: 

 'keyup': function(event) {
    event.preventDefault();
    console.log("KEYUP");
}

Update: it appears to be a generic bug in the framework. I would appreciate it if anyone could share a manual hack I could employ that doesn't involve using someone else's packages.

Update 2: I have solved this problem as shown below.

Upvotes: 4

Views: 2151

Answers (3)

robertdavid
robertdavid

Reputation: 403

Currently Meteor is properly handling <body> events, unless you are using a renderer which takes over rendering of the template. An example of this is Kadira:blaze-templates which will override default Meteor rendering of template (for use with FlowRouter), or Iron Router.

Luckily there is a simple package to restore this functionality called gwendall:body-events.

Upvotes: 0

FullStack
FullStack

Reputation: 6020

All of a sudden my original code works. Maybe the good folks at Meteor has fixed the problem, yay!

Here's what works for me on 0.9.3.1: 

Template.template_name_here.events({
  'keyup': function(event) {
    event.preventDefault();
    console.log("KEYUP");
  }
});

Meteor can even handle multiple events with a single handler like this:

Template.template_name_here.events({
  'keyup, click': function(event) {
    event.preventDefault();
    console.log("KEYUP OR CLICK");
  }
});

Awesome!

Upvotes: 2

Adam Wolski
Adam Wolski

Reputation: 5656

Unfortunately there is a bug in meteor (source) that events don't fire on UI.body.template. You can use a package meteor-body-events to patch that, and attach keyup event on entire document.

Upvotes: 4

Related Questions