CODEWITHSUNDEEP
jquerymeteorclick
charliemagee
charliemagee

Reputation: 693

meteor click happening twice

I'm trying to hide/show a nav by changing it's position via toggleClass rather than hide/show. (I have my reasons.)

The standard 3 bar nav link for showing/hiding such things is exactly where one of the nav icons appears after the position switch. Clicking the nav link brings the nav area into position perfectly, but then it also clicks the icon that appears there and jumps directly to the new url tied to the icon. But I'm only clicking once.

The nav link is below the nav icons via z-index.

I haven't been able to figure out how to unbind the click using this syntax, and I've tried e.preventDefault and timeouts and other ideas I've found. Nothing is working.

Here's my very simple js:

Template.header.events({

  'tap #menulink': function(e) {
   e.preventDefault();
   $('nav').toggleClass('shownav');
  }

});

Upvotes: 2

Views: 681

Answers (1)

Rajanand02
Rajanand02

Reputation: 1303

It is happening because of event bubbling. Try e.stopPropagation() to avoid that.

Template.header.events({
  'tap #menulink': function(e) {
   e.preventDefault();
   e.stopPropagation()
   $('nav').toggleClass('shownav');
  }   
});

Upvotes: 5

Related Questions